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

Question

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

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

任何帮助都会很棒！

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

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

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

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

谢谢 ：）

原文由 Nick 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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 的元素。

希望这对您有所帮助。

原文由 James 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以从所有 .tab 中删除类 active $(this) .tab

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

Your code won’t work because after removing class active from all .tab , you also add class active to all .tab again. So you need to use $(this) instead of $('.tab') to add the class active only to the clicked .tab anchor

更新小提琴

原文由 Felix 发布，翻译遵循 CC BY-SA 3.0 许可协议