Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is there a more elegant way to apply css to "all elements but this one"?

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?

like image 327
Abe Miessler Avatar asked Feb 23 '23 08:02

Abe Miessler


2 Answers

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

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

like image 102
Robert Avatar answered Feb 26 '23 09:02

Robert


Why don't you just have the inactive style be the default style? Then, you can just do this:

$("ul.tabs li").removeClass("active");
$(this).addClass("active");
like image 34
FishBasketGordo Avatar answered Feb 26 '23 07:02

FishBasketGordo