Add/Remove classes using jQuery

Question

I have few tabs defined and wrapper around a tag. They contain several elements like spans, img etc. My idea is to add class ACTIVE for clicked tab and remove it from previous tab so that only one is active at any point of time. The code I use is working

     <script>
     $(document).ready(function() {
         $(".tabs").click(function() {
            $(this).toggleClass("active");

         });
     });

But this is just part of solution. Its adding class to tab but it does not remove it from previous clicked tab. So if I have 3 tabs and click on each, all will be selected. Any easy fix for this?

See also: stackoverflow.com/questions/11578081/…

Kolban
– Kolban

2014-11-07 02:51:48 +00:00
Commented Nov 7, 2014 at 2:51 — Kolban
– Kolban, Commented Nov 7, 2014 at 2:51

TysonWolker · Accepted Answer · 2014-11-07 02:17:44Z

3

$(".tabs").click(function() {
     $(".tabs").removeClass("active");
     $(this).addClass("active");
});

answered Nov 7, 2014 at 2:17

TysonWolker

4362 silver badges9 bronze badges

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

1 Comment

Leo Silence Over a year ago

if is a tag, maybe add a preventDefault() will be better.

Amit · Accepted Answer · 2014-11-07 02:22:59Z

0

You can also try this

$(".tabs").on('click',function() {
   $(".tabs").removeClass("active");
   $(this).addClass("active");
});

About on: Attach an event handler function for one or more events to the selected elements.

answered Nov 7, 2014 at 2:22

Amit

15.4k8 gold badges50 silver badges69 bronze badges

1 Comment

Terry Over a year ago

If you're using .on() without listening for its origin (specified by the second parameter) then you can simply stick to .click().

Collectives™ on Stack Overflow

Add/Remove classes using jQuery

2 Answers 2

1 Comment

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related