jQuery:找到正确的元素来删除类

Question

好吧，不知何故，我只是不知道如何使这项工作成功，它不会那么困难。

我有一个普通的旧导航，如下所示:

<ul>
        <li><a href="#" class="men-trigger">Men's</a></li>
        <li><a href="#" class="women-trigger">Women's</a></li>
        <li><a href="#" class="coed-trigger">Coed</a></li>
        <li><a href="#" class="all-trigger">All</a></li>
</ul>

我需要向单击的元素添加一个类(我知道该怎么做):

$('.men-trigger').click(function() {  
   $(this).addClass('active');   
});

我遇到的问题是，当单击另一个导航项时，如何从导航项中删除类active。

我尝试过类似的方法，但不起作用:

$('.men-trigger').click(function() {  
    $(this).addClass('active');
    $(this).prev().siblings().find('active').removeClass('active');
});

我尝试使用 .parent().siblings().children();、.parents(ul).find('active'); 和我还是没能成功。

我创建了一个 Demo 这个。

注意:每个导航元素都需要有自己的类，因为我正在脚本中执行其他操作，这里我只是向您展示我遇到的问题。

预先感谢您对此提供的任何帮助。

Answer 1

$('.men-trigger').click(function() {  
    $(this).addClass('active').siblings().removeClass('active');
});

此外，您可以使用“ends-with”选择器连接所有这些函数:

$('[class$="trigger"]').click(function() {  
    $(this).addClass('active').siblings().removeClass('active');
});

由于它们是 li 内的嵌套 anchor ，因此您可能必须:

$('[class$="trigger"]').on('click', function() {  
    $(this).addClass('active').parent('li').siblings().find('a').removeClass('active');
});​

如果使用 jQuery 1.7+，它还会添加 on() 作为绑定(bind)事件处理程序的首选方式

FIDDLE