单击不同行的选项卡时删除活动 class 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();
    });
});

我想要做的是在我单击不同行中的另一个选项卡后删除活动的 class，目前它设置为删除 class 如果我单击另一个同一行中的选项卡我需要将其应用于所有行。

在我的 CSS 中使用活动 class 来提供不同的背景颜色，此时当我单击选项卡 3（例如）然后选项卡 4 3 将不再有背景颜色，但 4 将完美。

但是现在我有多行选项卡，如果我再次单击第 1 行选项卡 2 然后单击第 2 行选项卡 1 然后我单击的第一个选项卡（第 1 行选项卡 2）仍然有一个活动 class 所以仍然有不同的背景颜色。

这个问题已经困扰我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');

});

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");
});

单击不同行的选项卡时删除活动 class jQuery ui

remove active class on click of different row of tabs jQuery ui

javascript

jquery

tabs

jquery-ui