simplyTabs is a jquery plugin that creates a tabbed interface out of a list of in-page anchors. The script is quite robust: if the anchor's target element does not exist, that specific tab is not created.
In order to achieve the "tabbification", the plugin simply uses css classes, so that you should only need basic CSS skills to tweak the plugin to your liking . A simple stylesheet is included so that you have something to start from.
Your markup should have a container inside which the tabs will be looked for and created.
Inside this container, define your tabs with an id (ex: "tab1" or "introduction"): each tab can be an LI, a P or a DIV tag, it shouldn't matter, as long as it is semantically relevant to the nature of your content. You can style it afterwards using CSS to suit your graphical taste.
However, it is important that you include a tab navigation menu, in the form of self-page anchor links, where each link points to a tab element via its id (ex: <a href="#introduction">tab label</a>) . If it does not exist, the tab will simply not be created.
Here is an example
<div id="tabContainer"> <ul id="anchorlinks"> <li><a href="#tab1">Tab 1</a></li> <li><a href="#tab2">Tab 2</a></li> <li><a href="#tab3">Tab 3</a></li> <li>This will not be a tab</li> </ul> <div id="tab1"> This is the first tab...</div> <div id="tab2"> This is the second tab...</div> <div id="tab3"> This is the third tab...</div> </div>
You control the look of your tabs entirely via your stylesheet. A sample stylesheet is provided to get you going. Basically, it allows you to control the look and dimensions of the tabs, the look and position of the tab menu. I feel that's the best way to make this plugin very versatile.
You simply call the plugin inside your document.ready function, like this:
Most of the options are just a way for you to change the class names that the plugin uses. IF you do change them, make sure you reflect those changes in your CSS!
Like this script? Learned something? Feel free to send me a coin via paypal:As i do not have much free time, donations will motivate the script improvement and documentation. Thanks much!
R2(12 November 2009): plugin now works for multiple tabs on the same page (Thanks johnb !)
R1(4 March 2009): initial release
My lifetime gratitude to John Resig and the team behind jQuery: if Heaven does not exist, it should be built right for these guys. And maybe we should actually ask the JQuery team to build it for all of humanity !
Please use the dedicated project page on the jquery plugin repository.