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

Question

我是jQuery的新手,所以如果这是一个愚蠢的问题,我很抱歉.但我一直在寻找Stack Overflow,我可以找到一半工作的东西,我只是无法让它完全发挥作用.

我有2个标签 - 1个是活动的,另一个不是.单击非活动选项卡后,我希望为其提供活动类,以及要删除的上一个活动类.每次单击非活动选项卡时反之亦然.

任何帮助都会很棒!

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

这是我尝试添加和删除类的内容:

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

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

谢谢 :)

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它时,查找具有事件的元素,在您的情况下查找单击的元素.

希望这对你有所帮助.

Answer 2

您可以active从全部删除类.tab并使用$(this)目标点击当前.tab:

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

您的代码将无法正常工作,因为active从所有类中删除了类后.tab,您还可以再次active向所有类添加类.tab.因此,您需要使用$(this)而不是仅$('.tab')将类添加active到单击的.tab锚点

更新小提琴

Answer 3

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