Geek Answers Handbook

JQuery changes CSS class on click

I'm working on the project. I have some bindings like a tab, each of which has some CSS class, the selected tab has a separate css class. I click on the tab and I want to change my CSS class to the selected css class. I performed this function, but I am having some problems with the fact that the previously selected tab also has the same class as I can change the previous selected tab to an 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>
+4
source share
5 answers

You do not need to use each here, in the click element with class btn remove the class for all elements with class btn and assign the required class to the current element ( referred by $(this) ), which is the source of the event. I also assume that you want to remove the selected class from the 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 holding on to the last selected item and changing its 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); });
+14
source

$.each()

Use this method:

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

Gotta 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"); });
0
source

First you need to bind the click event to the CSS class “btn” using the jQuery selector, this will allow you to manipulate all the buttons at the same time.

Then find the previously selected button, delete the selected class and add the regular class.

Finally, delete the regular class with the button pressed 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

0
source

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"); });
0
source

More articles:


All Articles