單擊選項卡的另一行jQuery ui刪除活動類

Question

$(document).ready(function() {
    $('.tabs .tab-links a').on('click', function(e)  {
        var currentAttrValue = $(this).attr('href');

        // Show/Hide Tabs
        $('.tab').slideUp();
        $('.tabs ' + currentAttrValue).slideDown(); // causes slide up if click on other tab


        // Change/remove current tab to active
        $(this).parent('li').addClass('active').siblings().removeClass('active');

        e.preventDefault();
    });
});

我想做的是一旦我單擊另一行中的另一個選項卡，就刪除活動的類，如果我單擊同一行中的另一個選項卡，則將其設置為刪除該類，我需要將其應用於所有行。

在我的CSS中，活動類用於提供不同的背景色，例如，當我單擊選項卡3時，然后選項卡4中的三個將不再具有背景色，而4將變得完美。

但是現在我有多行選項卡，如果我再次單擊第1行選項卡2，然后單擊第2行選項卡1，則我單擊的第一個選項卡（第1行選項卡2）仍然具有活動的類，因此背景顏色仍然不同。

我現在已經有兩天了，如果有人知道如何解決，請幫助。 比你。

Answer 1

我做了一個小提琴：

http://jsfiddle.net/fzvyu63w/

---

$('.tab').on('click', function(){

    var thisTab = this;

    /* some code ... */

    /* Removing active effect with slideUp: */
    $('.active').not(thisTab).slideUp(function(){
        $(this).removeClass('active').fadeIn();
    });

    /* After that, active the clicked tab: */
    $(thisTab).addClass('active');

});

Answer 2

嘗試這個

$('.tabs').removeClass('active').slideUp();

要么

$(".active").removeClass("active");

Answer 3

解決了

//Change/remove current tab to active
$("li").click(function() {
   $('li').removeClass("active");
   $(this).addClass("active");
});