jQuery - 添加活动类并在单击时从其他元素中删除活动答案

【问题标题】：jQuery - Add active class and remove active from other element on clickjQuery - 添加活动类并在单击时从其他元素中删除活动
【发布时间】：2014-03-20 09:42:49
【问题描述】：

我是 jQuery 新手，如果这是一个愚蠢的问题，我很抱歉。但是我一直在查看 Stack Overflow，我可以找到一半工作的东西，我就是无法让它完全工作。

我有 2 个选项卡 - 1 个处于活动状态，另一个未处于活动状态。单击非活动选项卡后，我希望将其赋予活动类，并删除以前的活动类。每次点击非活动标签时反之亦然。

任何帮助都会很棒！

这是我目前拥有的： http://jsfiddle.net/zLpe5/

这是我尝试添加和删除类的方法：

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    $(".tab").addClass("active");        
});
});

如果有人可以帮助合并我小提琴中的 2 位脚本，那也将是一个巨大的帮助。因为我对这是如何做到的感到很困惑！

谢谢你:)

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

试试这个

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   
});
});

当您使用$(".tab").addClass("active"); 时，它会针对所有类名为.tab 的元素。相反，当您使用 this 时，它会查找具有事件的元素，在您的情况下是 clicked 的元素。

希望对您有所帮助。

【讨论】：

谢谢。它对我来说效果很好，但我有一个问题。为什么我必须双击其他活动类才能在下一个元素上活动。单击一下就可以了。不确定是否因为代码清楚地表明了我得到它的点击事件。但是，我的问题是，我怎样才能避免双击活动类激活？
@appdesigns 如果我理解正确，您希望避免在单击活动选项卡时采取行动。为此，请检查“如果单击的选项卡没有活动类”。结果代码将是$(".tab").click(function () { if(!$(this).hasClass('active')) { $(".tab").removeClass("active"); $(this).addClass("active"); } });
它的工作方式与以下相同：我希望能够避免双击其他活动类以移动到下一个元素。 $(document).ready(function() { $(".tab").click(function () { $(".tab").removeClass("active"); // $(".tab"). addClass("active"); // 用下面的方法代替 $(this).addClass("active"); }); });

【解决方案2】：

您可以从所有.tab 中删除类active 并使用$(this) 来定位当前点击的.tab：

$(document).ready(function() {
    $(".tab").click(function () {
        $(".tab").removeClass("active");
        $(this).addClass("active");     
    });
});

您的代码将不起作用，因为在从所有 .tab 中删除类 active 后，您还再次将类 active 添加到所有 .tab。所以你需要使用$(this) 而不是$('.tab') 将active 类添加到点击的.tab 锚点

Updated Fiddle

【讨论】：

this 指的是被点击的元素，$(".tab").toggleClass("active") 很好。但是，您已经更新了答案并提供了另一个解决方案。

【解决方案3】：

$(document).ready(function() {
    $(".tab").click(function () {
        if(!$(this).hasClass('active'))
        {
            $(".tab.active").removeClass("active");
            $(this).addClass("active");        
        }
    });
});

【讨论】：

【解决方案4】：

试试这个：

$(document).ready(function() {
    $(".tab").click(function () {
        $("this").addClass("active").siblings().removeClass("active");   
    });
});

【讨论】：

【解决方案5】：

您已经从所有选项卡中删除了活动类，但随后又将活动类添加到所有选项卡。您应该只将活动类添加到当前选择的选项卡中，例如 http://jsfiddle.net/QFnRa/

$(".tab").removeClass("active");
$(this).addClass("active");

【讨论】：

【解决方案6】：

使用 jquery cookie https://github.com/carhartl/jquery-cookie 然后您可以确定该类将保持页面刷新。

将被点击元素的 id 存储在 cookie 中，然后在刷新时使用它来添加类。

        //Get cookie value and set active
        var tab = $.cookie('active');
        $('#' + tab).addClass('active');

        //Set cookie active tab value on click
        //Done this way to preserve after page refresh
        $('.topTab').click(function (event) {
            var clickedTab = event.target.id;
            $.removeCookie('active', { path: '/' });
            $( '.active' ).removeClass( 'active' );
            $.cookie('active', clickedTab, { path: '/' });
        });

【讨论】：