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

是的，您可以删除来自包含它的任何元素的 ，然后将其添加到点击的元素中。看：

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

活动/非活动Jquery导航菜单

2 个答案: