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 。

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

提前感谢您提供任何帮助。

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里面的嵌套锚，你可能不得不：

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

如果使用jQuery 1.7 +

，还会添加on()作为绑定事件处理程序的首选方法

FIDDLE

Answer 2

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

假设您正在使用仅对nav元素激活的类

Answer 3

您可以使用最近找到父元素。你的发现没有“。”活跃之前。

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

Answer 4

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

jQuery：找到删除类的正确元素

4 个答案: