Change CSS class of a Jquery Tab element

Question

I've the following tab elements in my HTML.

<section id="bill-information">
<!-- Tabbed Navigation for bills -->
<ul class="bill-tab-header">
<li class="bill-tab-button bill-tab-button-selected bill-tab-fixed-width"><a href="#tab-1"><span>OPEN</span></a></li>
<li class="bill-tab-button bill-tab-fixed-width"><a href="#tab-2"><span>SETTLED</span></a></li>
<li class="bill-tab-button bill-tab-fixed-width"><a href="#tab-3"><span>CANCEL</span></a></li>
</ul>

There is a separate CSS class for the selected Item. I want to change the Class to the clicked tab. How can I do this using JQuery.

Thank you.

Roko C. Buljan · Accepted Answer · 2013-04-08 07:17:48Z

2

EXAMPLE

$(function() {

  var selClass= "bill-tab-button-selected";
  $('.bill-tab-header li').click(function( e ) {
    e.preventDefault();
    $(this).addClass(selClass).siblings().removeClass(selClass);
  });

});

http://api.jquery.com/event.preventDefault/
http://api.jquery.com/click/
http://api.jquery.com/addclass/
http://api.jquery.com/siblings/
http://api.jquery.com/removeclass/

answered Apr 8, 2013 at 7:17

Roko C. Buljan

209k41 gold badges335 silver badges346 bronze badges

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

Comments

Sandeep · Accepted Answer · 2013-04-08 07:17:12Z

0

May be its useful for 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);           
  });

answered Apr 8, 2013 at 7:17

Sandeep

436 bronze badges

Comments

meer · Accepted Answer · 2013-04-08 07:19:19Z

0

You can use

$("#btnID").addClass("myClass yourClass");

on click event to add class and to remove class use

$("p").removeClass("myClass noClass")

reference

http://api.jquery.com/addClass/

answered Apr 8, 2013 at 7:19

meer

1,0121 gold badge12 silver badges11 bronze badges

Comments

Eli · Accepted Answer · 2013-04-08 07:25:54Z

0

You can do like this:

$('.bill-tab-button').click(function() {
    $(this).addClass("bill-tab-button-selected").siblings().removeClass('bill-tab-button-selected');
});

Demo

edited Apr 8, 2013 at 7:25

answered Apr 8, 2013 at 7:20

Eli

14.9k5 gold badges61 silver badges77 bronze badges

1 Comment

Roko C. Buljan Over a year ago

$(".bill-tab-button").each(function() { the .each() method is not needed here at all, cause $(".bill-tab-button") returns a collection of elements already.

Collectives™ on Stack Overflow

Change CSS class of a Jquery Tab element

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related