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

Question

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

javascriptjqueryhtmlcss

23

我刚学习jQuery，如果这是一个愚蠢的问题，请原谅。但我在查找 Stack Overflow 时能找到一些部分可用的东西，只是无法使其完全工作。

我有2个选项卡 - 1个是活动的，另一个不是。一旦点击非活动选项卡，我希望它被赋予活动类，并删除先前的活动类。每次单击非活动选项卡时都反之亦然。

任何帮助都将非常感激！

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

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

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

如果有人能帮我将我的fiddle中的两个脚本合并起来，那将是非常有帮助的。因为我对如何做到这一点感到相当困惑!

谢谢 :)

- Nick

7个回答

11

您可以从所有的 .tab 中移除 active 类，并使用 $(this) 来选中当前点击的 .tab:

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

你的代码无法正常工作，因为在从所有 .tab 中删除类 active 之后，又将类 active 添加到所有 .tab 中。所以你需要使用 $(this) 而不是 $('.tab') 将类 active 添加到点击的 .tab 锚点。

更新后的示例

- Felix

“this” 指的是被点击的元素，“$（“.tab”）.toggleClass（“active”）” 是可以的。但是你更新了答案并提出了另一种解决方案。 - Hashem Qolami

8

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

- demonofthemist

4

尝试这个：

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

- hamidreza samsami

3

你已经从所有选项卡中删除了活动类，但是你又把活动类重新添加到了所有选项卡中。你应该只将活动类添加到当前选定的选项卡上，就像这样：http://jsfiddle.net/QFnRa/。

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

- mayrs

3

使用jquery cookie https://github.com/carhartl/jquery-cookie，这样你就可以确保类在页面刷新后仍然存在。

将所点击的元素的id存储在cookie中，然后使用该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: '/' });
        });

- Gary

0

以下代码将从元素中删除当前活动类，并将活动类添加到单击的元素

    $('li').click((e)=>{ 
       $('.active').removeClass('active'); 
       $(e.currentTarget).addClass("active"); 
    });

- Husain Raniwala

请不要只发布代码答案，而是添加一些文本说明您的方法如何工作以及它与其他给出答案的不同之处。您还可以查看我们的“如何撰写好答案”条目。 - ahuemmer

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- James · Accepted Answer

试试这个

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

当你使用$(".tab").addClass("active");时，它会将所有class为.tab的元素作为目标。而当你使用this时，它会寻找具有事件的元素，例如在这种情况下是被点击的元素。

希望对你有所帮助。