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?
$("ul.tabs li").click(function(){
$(".active").removeClass("active").addClass("inactive");
$(this).removeClass("inactive").addClass("active");
});
Working example at: http://jsfiddle.net/4uMmc/
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");
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With