jQuery Tabs
27 June 2006 | Tutorials | 10 Comments
A fellow named Klaus has created a nifty little plugin that creates accessible unobtrusive javascript tabs using jQuery.
With the correct (x)HTML and CSS you can create tabs as easily as
$.tabs("container"); // first tab on by default
If you want to have the second tab “on” by default:
$.tabs("container", 2); // second tab on
Klaus has an example that you can view to see the end result.
My Contribution
I had to do something to add to Klaus’ contribution so I came up with a simple form that you can use to generate the markup for the tabs.
Instructions:
It’s very simple. Just type a name for each tab (up to 5) and click the button at the bottom of the form. The next page will generate the html you can copy and paste into your file.
You will also need to download the CSS from Klaus’ site, modify it as you see fit, and of course upload the jQuery javascript library to your server.
Here is the link for the tab markup generator.
Enjoy.
Subscribe
10 Comments
Leave a Reply
You can follow the discussion through the Comments feed. You can also pingback or trackback from your own site.






Thank you Jack, this is very neat!
I just wanted to mention that I have revised the plugin lately so that it conforms to the proposed jQuery plugin construct.
This means that the syntax slightly changed:
$('#container').tabs();This also means that one can now use jQuery’s capability to find elements in the DOM tree (and need not to rely on an id) and also chain methods.
Klaus,
Glad you stopped by!
I’ll work up an update to my xhtml generator and post it soon.
Not to be farting at the party, but when I tried to enter the first tab, I wanted to use my name.
I mistyped “oööe” (O’s with two dots, instead of L’s in the middle), and the script was unable to find the tab named so. Crazy/Scandinavian characters in the tab names are thus out of the question here.
(Using WinXP, Firefox.)
how can i fetch different rss feed on each tabs??
tia
[…] 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the […]
[…] 15daysofjquery- jQuery Tabs A simple form that you can use to generate the markup for the […]
Looks amazing. BTW,Do you have mouse move over TAB?
My colleague Alex wrote his version of jQuery tabs. It’s online at this address:
http://www.thetruetribe.com/2008/04/how-do-i-make-tabs-in-jquery-without-jq.html
Check it out and let me know what you think!
Thanks.. nice Tabs
[…] 15daysofjquery- jQuery Tabs […]