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

您可以從所有.tab刪除active類並使用$(this)來定位當前點擊的.tab ：

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

您的代碼將不起作用，因為從所有.tab刪除類active后，您還再次將類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");        
        }
    });
});

Answer 4

試試這個：

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

Answer 5

您已經從所有選項卡中刪除了活動類，但隨后又將活動類添加到所有選項卡中。 您應該只將活動類添加到當前選擇的選項卡中，例如http://jsfiddle.net/QFnRa/

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

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

Answer 7

嘗試這個

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