活动/非活动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");
    });
});

这是一个例子.