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锚点

<强> Updated Fiddle

Answer 3

您已经读取了所有选项卡中的活动类，但是再次将活动类添加到所有选项卡。您应该只将活动类添加到当前选定的选项卡，如http://jsfiddle.net/QFnRa/

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

Answer 4

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

Answer 5

试试这个：

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

Answer 6

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

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

        //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: '/' });
        });

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

6 个答案: