1

好吧，不知何故，我只是无法弄清楚如何使这项工作，它不会那么困难。

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

<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');但我仍然无法使其工作。

我为此创建了一个演示。

注意：每个导航元素都需要有自己的类，因为我在脚本中做了其他事情，这里我只是向您展示我遇到的问题。

提前感谢您对此的任何帮助。

4

4 回答 4

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

此外，您可以使用“ends-with”选择器加入所有这些功能：

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

而且由于它们是 li 内部的嵌套锚点，您可能必须：

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

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

小提琴

于 2012-11-30T15:55:15.160 回答
1 
$('.men-trigger').click(function() {  
    $('.active').removeClass('active');
    $(this).addClass('active');
});

假设您仅对导航元素使用 active 类

于 2012-11-30T15:56:20.450 回答
1

您可以使用最接近来查找父元素。而你的发现没有“。” 活动前。

$('.men-trigger').click(function() {  
    $(this).closest('ul').find('.active').removeClass('active');
    $(this).addClass('active');
});
于 2012-11-30T15:58:29.700 回答
1 
$('li').click(function(){
    $(this).children('a').addClass('active');
    $(this).siblings().children('a').removeClass('active');    
});​
于 2012-11-30T15:58:36.997 回答