jQuery 是一個常用的 JavaScript 庫,能夠簡化 JavaScript 編寫的過程。
其中,實現菜單功能是 jQuery 的一個常用功能之一,僅需簡單的代碼就能完成。
以下就是一個 jQuery 實現菜單的代碼:
// HTML結構 <div class="menu-wrap"> <ul class="menu"> <li class="active"><a href="#">菜單1</a></li> <li><a href="#">菜單2</a></li> <li><a href="#">菜單3</a></li> </ul> </div> // CSS 樣式 .menu { list-style: none; margin: 0; padding: 0; background-color: #ddd; } .menu li { display: inline-block; } .menu li a { display: block; padding: 10px; text-align: center; } .menu li.active a { background-color: #aaa; } // jQuery 代碼 $(document).ready(function() { $('.menu li').click(function() { $('.menu li').removeClass('active'); $(this).addClass('active'); }); });
上述代碼中,結合 HTML、CSS 和 jQuery,實現了一個簡單的菜單功能。在菜單項被點擊時,改變其背景色,表明當前選中狀態。
下一篇div p br