jQuery - Add active class and remove active from other element on click

Question

I'm new to jQuery, so I'm sorry if this is a silly question. But I've been looking through Stack Overflow and I can find things that half work, I just can't get it to fully work.

I have 2 tabs - 1 is active, the other is not. Once the inactive tab is clicked, I want that to be given the class of active, and the previous active class to be removed. And vice versa each time an inactive tab is clicked.

Any help would be great!

Here's what I currently have: http://jsfiddle.net/zLpe5/

Here's what I've tried for adding and removing the class:

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    $(".tab").addClass("active");        
});
});

If anybody could help with with merging the 2 bits of script in my fiddle that'd be a massive help too. As I'm quite confused about how that's done!

Thank you :)

James · Accepted Answer · 2014-03-20 09:45:10Z

57

Try this

$(document).ready(function() {
$(".tab").click(function () {
    $(".tab").removeClass("active");
    // $(".tab").addClass("active"); // instead of this do the below 
    $(this).addClass("active");   
});
});

when you are using $(".tab").addClass("active");, it targets all the elements with class name .tab. Instead when you use this it looks for the element which has an event, in your case the element which is clicked.

Hope this helps you.

answered Mar 20, 2014 at 9:45

James

4,5901 gold badge21 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

appdesigns Over a year ago

Thanks. It worked well for me, but I've got one concern. Why do I have to double click in other for the active class to be active on next element. A single click would have worked. Not sure if because the code clearly indicated the on click event which I get it. But, My question here is, how could I avoid double clicking for active class to be active?

James Over a year ago

@appdesigns if I understood you correctly, you want to avoid action on clicking an active tab. For that do a check "if the clicked tab does not have an active class". The resulting code will be

$(".tab").click(function () {         if(!$(this).hasClass('active'))         {             $(".tab").removeClass("active");             $(this).addClass("active");                 }     });

appdesigns Over a year ago

it works same as below: I want to be able to avoid double clicking in other for the active class to move on to the next element. $(document).ready(function() { $(".tab").click(function () { $(".tab").removeClass("active"); // $(".tab").addClass("active"); // instead of this do the below $(this).addClass("active"); }); });

Felix · Accepted Answer · 2014-03-20 09:57:39Z

11

You can remove class active from all .tab and use $(this) to target current clicked .tab:

$(document).ready(function() {
    $(".tab").click(function () {
        $(".tab").removeClass("active");
        $(this).addClass("active");     
    });
});

Your code won't work because after removing class active from all .tab, you also add class active to all .tab again. So you need to use $(this) instead of $('.tab') to add the class active only to the clicked .tab anchor

Updated Fiddle

edited Mar 20, 2014 at 9:57

answered Mar 20, 2014 at 9:43

Felix

38.2k8 gold badges45 silver badges56 bronze badges

1 Comment

Hashem Qolami Over a year ago

this refers to clicked element, $(".tab").toggleClass("active") was fine. However you've updated the answer and came with another solution.

Nisse Engström · Accepted Answer · 2015-09-21 13:33:52Z

8

$(document).ready(function() {
    $(".tab").click(function () {
        if(!$(this).hasClass('active'))
        {
            $(".tab.active").removeClass("active");
            $(this).addClass("active");        
        }
    });
});

edited Sep 21, 2015 at 13:33

Nisse Engström

4,77323 gold badges29 silver badges44 bronze badges

answered Mar 20, 2014 at 9:47

demonofthemist

4,1894 gold badges29 silver badges46 bronze badges

Comments

hamidreza samsami · Accepted Answer · 2017-02-19 12:58:40Z

4

Try this one:

$(document).ready(function() {
    $(".tab").click(function () {
        $("this").addClass("active").siblings().removeClass("active");   
    });
});

answered Feb 19, 2017 at 12:58

hamidreza samsami

4295 silver badges4 bronze badges

Comments

mayrs · Accepted Answer · 2014-03-20 09:45:25Z

3

You alread removed the active class from all the tabs but then you add the active class, again, to all the tabs. You should only add the active class to the currently selected tab like so http://jsfiddle.net/QFnRa/

$(".tab").removeClass("active");
$(this).addClass("active");

answered Mar 20, 2014 at 9:45

mayrs

2,3874 gold badges24 silver badges36 bronze badges

Comments

Gary · Accepted Answer · 2014-06-25 09:25:32Z

Use jquery cookie https://github.com/carhartl/jquery-cookie and then you can be sure the class will stay on page refresh.

Stores the id of the clicked element in the cookie and then uses that to add the class on refresh.

        //Get cookie value and set active
        var tab = $.cookie('active');
        $('#' + tab).addClass('active');

        //Set cookie active tab value on click
        //Done this way to preserve after page refresh
        $('.topTab').click(function (event) {
            var clickedTab = event.target.id;
            $.removeCookie('active', { path: '/' });
            $( '.active' ).removeClass( 'active' );
            $.cookie('active', clickedTab, { path: '/' });
        });

Husain Raniwala · Accepted Answer · 2022-07-20 06:15:39Z

0

the below code will remove the current active class to the element and add active class to the clicked element

    $('li').click((e)=>{ 
       $('.active').removeClass('active'); 
       $(e.currentTarget).addClass("active"); 
    });

edited Jul 20, 2022 at 6:15

answered Jul 14, 2022 at 5:34

Husain Raniwala

32 bronze badges

1 Comment

ahuemmer Over a year ago

Please don't post code-only answers but add a little textual explanation about how and why your approach works and what makes it different from the other answers given. You may also have a look at our "How to write a good answer" entry.

Collectives™ on Stack Overflow

jQuery - Add active class and remove active from other element on click

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

7 Answers 7

3 Comments

1 Comment

Comments

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related