javascript - 单击不同行的选项卡时删除事件类 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 中使用 active 类来提供不同的背景颜色，例如，当我单击选项卡 3 时，选项卡 4 3 将不再具有背景颜色，但 4 将会完美。

但是现在我有多行选项卡，如果我再次单击第 1 行选项卡 2，然后单击第 2 行选项卡 1，那么我单击的第一个选项卡(第 1 行选项卡 2)仍然具有事件类，因此仍然具有不同的背景颜色。

这个问题已经困扰我两天了，如果有人知道如何解决，请帮忙。 比你还要多。

Answer 1

我做了一个 fiddle :

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');

});