Question

I have some html/jQuery that I am using to implement some tabbed navigation. When a new tab is selected I need to make it’s css class “active” and change the previous tabs css class to “inactive”. To do this I have been using the following code inside of my click event:

$("ul.tabs li").removeClass("active"); //Remove any "active" class
$("ul.tabs li").addClass("inactive");  //Set all to "inactive"
$(this).removeClass("inactive");  //remove "inactive" from the item that was clicked
$(this).addClass("active"); //Add "active" class to the item that was clicked.

This works but I’m curious if anyone has found a cleaner/more elegant way of doing this?

Answer 1

$("ul.tabs li").click(function(){
    $(".active").removeClass("active").addClass("inactive");
    $(this).removeClass("inactive").addClass("active");
});

Working example at: http://jsfiddle.net/4uMmc/