How to change class property <li> in jQuery tab widget

Question

My script has a jQuery tab widget. When I click the tab, I want to change the class property of the li tab of the active tab to current .

How can i do this?

HTML:

 <ul class="nav-content"> <li class="current first-li"><a href="#tabs-1">tab 1</a></li> <li>tab2</li> </ul> 

JQuery

 $("ul.nav-content li").click(function() { // ?? }) 

Answer 1

 $("ul.nav-content li").click(function() { //you'll probably want to remove all 'current' classes first $(".current").removeClass("current") $(this).addClass("current") }) 

Answer 2

Try

 $("ul.nav-content li").click(function() { $(this).addClass("current"); } 

Answer 3

 $("ul.nav-content li").click(function() { $(this).addClass("current"); } 

You can use addClass to add a class. You can also refer to the pressed li using the this .

Answer 4

Just use the appropriate methods: http://api.jquery.com/category/manipulation/class-attribute/

Answer 5

You can add a class using the jQuery addClass method:

 $("ul.nav-content li").click(function() { $(this).addClass("current"); }); 

If you want to also remove the class (from what .current currently has, perhaps), you can use removeClass .

However, if you really want to change the class (and not just add it, which you indicated in your question), you will have to use attr :

 $("ul.nav-content li").click(function() { $(this).attr("class", "current"); }); 

This will change the value of the class attribute rather than add another class name to it.

Answer 6

 $("ul.nav-content li").click(function() { $("ul.nav-content li").removeClass("current"); $(this).addClass("current") } 

I assume that we should remove the entire current class before adding the current class.

Answer 7

When adding a class to a tab with a click, it is important to make it so that when you click another tab, the class is removed from the previous one.
The code below will do this for you:

 $('ul.nav-content li').click(function(){ $('ul.nav-content li').removeClass('current'); $(this).addClass('current'); });