Jquery change CSS class on clicking

Question

I am working on a project i am having some anchors like tab, each have some CSS class, the selected tab have separate css class. I am clicking on tab and i want to change its CSS class to selected css class i have done this functionality but i am having some problems with it is that previously selected tab also having same class, how can i change the previous selected tab to unselected class,Below is my code

$(".btn").each(function ()
{
    $(this).click(function () {                              
        $(this).removeClass("course-btn-tab").addClass("course-btn-tab-selected");        
    });
});

<div class="course-Search-tabs">
    <a href="#" class="course-btn-tab-selected btn" id="a">A</a>
    <a href="#" class="course-btn-tab btn" id="b">B</a>
    <a href="#" class="course-btn-tab btn" id="c">C</a>
    <a href="#" class="course-btn-tab" id="d">D</a>
</div>

IlludiumPu36 · Accepted Answer · 2019-11-22 06:21:26Z

24

You do not need to use each here, on click of element with class btn remove class for all elements with class btn and assign the desired class to current element (referred by $(this)) which is event source. Also I assume you want to remove selected class from previous elements.

$(".btn").click(function () { 
     if($(this).hasClass("course-btn-tab-selected"))
          $(".btn").removeClass("course-btn-tab-selected").addClass("course-btn-tab");               
     $(this).addClass("course-btn-tab-selected");        
});

Edit: You can improve this by hold the last selected element and changing it class if it suits you.

previouslyClicked = $(".btn").eq(0); //Assuming first tab is selected by default
$(".btn").click(function () {       
     previouslyClicked.removeClass("course-btn-tab-selected").addClass("course-btn-tab");                 
     $(this).addClass("course-btn-tab-selected");
     previouslyClicked = $(this);           
});

edited Nov 22, 2019 at 6:21

IlludiumPu36

4,32411 gold badges65 silver badges106 bronze badges

answered Jan 8, 2013 at 10:19

Adil

148k25 gold badges217 silver badges207 bronze badges

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

3 Comments

Syed Salman Raza Zaidi Over a year ago

i use this code but still having same problem, eg if A is selected and i click on B,it will change the class of B but class of A remains same

Syed Salman Raza Zaidi Over a year ago

how can i check the class of previous(or any one tab) is its selected?

palaѕн Over a year ago

In place of if($(this).attr('class') == "course-btn-tab-selected") try to use if($(this).hasClass("course-btn-tab-selected"))

Community · Accepted Answer · 2020-06-20 09:12:55Z

3

Wrong usage of `$.each()`

Use this way:

$(".btn").click(function () {
    $(".btn").removeClass("course-btn-tab-selected");
    $(this).addClass("course-btn-tab-selected");        
});

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 8, 2013 at 10:19

Praveen Kumar Purushothaman

167k27 gold badges215 silver badges261 bronze badges

1 Comment

Syed Salman Raza Zaidi Over a year ago

i use this code but still having same problem, eg if A is selected and i click on B,it will change the class of B but class of A remains same

A. Wolff · Accepted Answer · 2013-01-08 10:31:45Z

1

Should do the trick:

$(".btn").click(function () { 
        $(".course-btn-tab-selected").removeClass("course-btn-tab-selected").addClass('course-btn-tab');                 
        $(this).removeClass('course-btn-tab').addClass("course-btn-tab-selected");        

    });

edited Jan 8, 2013 at 10:31

answered Jan 8, 2013 at 10:23

A. Wolff

74.4k9 gold badges98 silver badges158 bronze badges

Comments

Jai · Accepted Answer · 2013-01-08 10:52:41Z

0

There is another way:

$(".btn").click(function (e) {
   e.preventDefault();
   $(this).siblings().removeClass("course-btn-tab-selected").addClass('course-btn-tab');
   $(this).addClass("course-btn-tab-selected");        
});

edited Jan 8, 2013 at 10:52

answered Jan 8, 2013 at 10:41

Jai

74.8k12 gold badges77 silver badges104 bronze badges

1 Comment

palaѕн Over a year ago

Looks good now. OP said that, "if A is selected and i click on B,it will change the class of B but class of A remains same". Are you having the same issue?

Jam · Accepted Answer · 2013-01-08 10:59:09Z

0

First you need bind a click event to "btn" CSS class using a jQuery selector, this will allow you manipulate all of the buttons at once.

Next find the previously selected button, remove the selected class and add the regular class.

Finally remove the regular class from the clicked button and add the selected class.

$('.btn').bind('click', function () {
    var previouslySelectedButton = $('.course-btn-tab-selected');
    var selectedButton = $(this);

    if (previouslySelectedButton)
        previouslySelectedButton.removeClass('course-btn-tab-selected').addClass('course-btn-tab');

    selectedButton.removeClass('course-btn-tab').addClass('course-btn-tab-selected');
});

Alternatively here is a working example using your HTML: jsFiddle

edited Jan 8, 2013 at 10:59

answered Jan 8, 2013 at 10:39

Jam

2962 silver badges8 bronze badges

Collectives™ on Stack Overflow

Jquery change CSS class on clicking

5 Answers 5

3 Comments

Wrong usage of `$.each()`

1 Comment

Comments

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Wrong usage of $.each()

1 Comment

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

Wrong usage of `$.each()`