Question

我有一些动态菜单。一旦有人点击菜单中的链接，我想突出显示这个点击的菜单。

$("#my_menu > li").click(function(){
   var clickedId = $(this).attr('id');
   $("#" + clickedId).css("font-weight", "bold");
   $("#" + clickedId).css("background-color", "#E0E0E0");
   $('#navigation_submenu').show(); //this is not important
});

但是现在我必须将其他菜单恢复到初始状态。请有人可以帮我怎么做？感谢

Answer 1

更好的方法是使用addClass()和removeClass()这样：

首先在CSS中为活动项创建一个类：

.active {
   font-weight:bold;
   background-color:#E0E0E0;
}

然后使用Jquery：

$("#my_menu > li").click(function(){
   //Remove previous active item
   $("#my_menu > li").removeClass('active');
   //Add class on clicked element
   $(this).addClass('active')   
});

选中 Demo Fiddle

Answer 2

这样的东西？

<强> CSS

li.active
{
    font-weight: bold;
    background-color: #E0E0E0;
}

<强>的JavaScript

$("#my_menu > li").on("click", function()
{
    $("#my_menu > li").removeClass("active");
    $(this).addClass("active");
});

Answer 3

使用CSS-class代替“active”。

$('.active').removeClass('active');
$(this).addClass('active');

当然，您需要使用粗体和更多的CSS类规范。

编辑：Oups，我太慢了。其他人给你几乎相同的答案。

JQuery选择性选择

3 个答案: