CODEWITHSUNDEEP
jqueryhtmljquery-uicss
Imesh Chandrasiri
Imesh Chandrasiri

Reputation: 5679

Change CSS class of a Jquery Tab element

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.

Upvotes: 0

Views: 394

Answers (4)

Eli
Eli

Reputation: 14827

You can do like this:

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

Demo

Upvotes: 0

meer
meer

Reputation: 982

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/

Upvotes: 0

Roko C. Buljan
Roko C. Buljan

Reputation: 206007

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/

Upvotes: 2

Sandeep
Sandeep

Reputation: 43

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);           
  });

Upvotes: 0

Related Questions