Subscribe in a readerBookmark This
Tab-Like Click Toggle in jQuery
By: Chris Missal
Page 1
In this example I have a list of items that I have styled for interaction. This <ul> contains
just 5 items, has an ID and defaults with the first element selected. I've frequently had to write this same code
to work as a simple tab control. There are a lot of plugins out there to do this, but this one is relatively
simple; it just uses two css classes to show the hover and toggle styles.
- One
- Two
- Three
- Four
- Five
Here is the script:
$(document).ready(function() {
$("#durp li").click(function() {
$(this).addClass("selected").removeClass("hover").siblings().removeClass("selected");
}).hover(function() {
if(!$(this).hasClass("selected")) $(this).addClass("hover");
}, function() {
$(this).removeClass("hover");
});
});
Again, this is a very simple example without much in terms of style or design, but it should get the idea across. This could easily be made into an extension method for jQuery. (If somebody does, I'd like to see it!)