活动/非活动Jquery导航菜单 [英] Active/inactive Jquery nav menu

问题描述

我不熟悉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");
    });
});

这是示例。

这篇关于活动/非活动Jquery导航菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！