有效/无效Jquery导航菜单

Question

我不擅长于JavaScript，所以如果任何人都可以帮助我，我将非常感激。

我有一个简单的列表是这样的：

<ul> 
<li id="nav1">Menu 1</li> 
<li id="nav2">Menu 2</li> 
<li id="nav3">Menu 3</li> 
</ul> 

当我想一个菜单元素上的用户点击添加一个类“menu_active”。

我可以用这个代码达到这样的结果：

<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”。

是否有简单的方法只有一个菜单元素突出显示？

Answer 1

我认为这应该工作：

$(function(){ 
    var menus = $("#nav1, #nav2, #nav3"); 
    menus.click(function(){ 
     menus.not(this).removeClass("menu_active"); 
     $(this).toggleClass("menu_active"); 
    }); 
}); 

这里是一个example。

Answer 2

是的，你可以从包含它你将它添加到点击的元素之前的任何元素中删除的menu_active类。看：

jQuery(".menu_active").removeClass("menu_active");