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?

Answer 1

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

Answer 2

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.