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）仍然有一个活动类，所以仍然有一个不同的背景颜色。

这是我现在遇到的问题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();

OR

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

Answer 3

解决了

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

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

3 个答案: