remove active class on click of different row of tabs 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();
    });
});

what I'm trying to do is remove the active class once I click on another tab in a different row, at the moment it's set to remove the class if I click on another tab in the same row I need this to be applied to all rows.

The active class is used in my CSS to give a different background colour, at the moment when I click on tab 3 (for example) then tab 4 three will no longer have a background colour but 4 will perfect.

But now I have multiple rows of tabs and if I click again on row 1 tab 2 then click on row 2 tab 1 then the first tab I clicked on ( row 1 tab 2) still has a active class so still has a different background colour.

It's a problem I have had now for 2 days, if anyone knows how to solve please help. Than you.

Answer 1

I did a 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

Try this

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

OR

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

Answer 3

Solved

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