活动/非活动Jquery导航菜单
问题描述:
我不熟悉javascript,所以如果有人可以帮助我,我会非常感激。
I'm not skilled with javascript so if anyone can help me I would be very grateful.
我有一个这样的简单列表:
I have a simple list like this:
<ul>
<li id="nav1">Menu 1</li>
<li id="nav2">Menu 2</li>
<li id="nav3">Menu 3</li>
</ul>
当用户点击菜单元素时,我想添加一个menu_active类。
When a user click on a menu element I'd like to add a class "menu_active".
我可以使用以下代码达到此结果:
I could reach this result with this code:
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery("#nav1").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
jQuery("#nav2").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
jQuery("#nav3").toggle(function () {jQuery(this).addClass("menu_active");},function () {jQuery(this).removeClass("menu_active");});
});
</script>
脚本有效,但如果你点击#nav1,然后点击#nav2,然后点击#nav3 ,这三个项目都有menu_active类。
The script work, but if you click on #nav1, then on #nav2, then on #nav3, all three items will have the class "menu_active".
是否有一种简单的方法只突出显示一个菜单元素?
Is there a simple way to have only a single menu element highlighted?
答
我认为这应该有效:
$(function(){
var menus = $("#nav1, #nav2, #nav3");
menus.click(function(){
menus.not(this).removeClass("menu_active");
$(this).toggleClass("menu_active");
});
});
这是示例。