jQuery选择性选择答案

【问题标题】：JQuery selective selectionjQuery选择性选择
【发布时间】：2014-02-07 23:41:46
【问题描述】：

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

$("#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
});

但现在我必须将其他菜单恢复到初始状态。请有人可以帮助我如何做到这一点？谢谢

【问题讨论】：

为什么不只是 $(this).css() 而不是添加 id 字符串

标签： jquery css selection

【解决方案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

【讨论】：

【解决方案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");
});

【讨论】：

【解决方案3】：

改为使用 CSS 类来表示“活动”。

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

你当然需要一个带有粗体的 CSS 类规范等等。

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

【讨论】：