jQuery 在父/兄弟/子上移除Class

Question

我正在使用以下 jQuery 来更改无序列表中元素的类。这似乎不是实现该效果的最有效方法。有更好的写法吗？

$(function() {
    $('nav li a').click( function() {
        $(this).parent().siblings().children().removeClass('active');
        $(this).addClass('active');
    });
});

谢谢

小

Answer 1

在这些情况下，将处理程序附加到 <li> 通常会更简单。然后点击bubble up来自<a> (默认情况下会发生)。然后你的处理程序看起来像这样:

$(function() {
  $('nav li').click( function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
});

然后在你的 CSS 中你只需考虑 active正在 <li> ，像这样:

li.active a { color: red; }

顺便说一句，如果你有很多<li>您想要使用的元素 .delegate() 像这样:

$('nav').delegate('li', 'click', function() {
  $(this).addClass('active').siblings().removeClass('active');
});