Lots of content and little space? Contents are not organized in a user-friendly format? Tabbed Content comes to the rescue.
- Free to use (including commercial)
On DOM ready
Start the tab content on DomContentLoaded instead of window.onload.
You can optionally choose if the most recently clicked tab will be remembered during your navigation.
You can specify which tab should be shown by default when the page loads.
Multiple Tab Contents
Valid HTML/HTML5 markup
Wide browser support (including IE 6)
- Download the source code by clicking the Download button at the top of this page, and put the downloaded tabcontent.js file and one of the template folders into your web application.
Insert the tabcontent.js and tabcontent.css links into the head section of your page
Add the tabs HTML and contents HTML to your page:
<ul class="tabs"> <li><a href="#view1">Features</a></li> <li><a href="#view2">How to Use</a></li> <li><a href="#view3">Source Code</a></li> </ul> <div class="tabcontents"> <div id="view1"> content 1 </div> <div id="view2"> content 2 </div> <div id="view3"> content 3 </div> </div>
Set Persistence (optional)
Add data-persist="true" to the root UL element:
<ul class="tabs" data-persist="true">
It will turn on the persistence feature: the most recently clicked tab will be remembered even if the page is reloaded or revisited within the browser session.
Set Default Tab (optional)
By default the first tab will be selected when the page is loaded. To override this, set class="selected" to the tab (LI element) that should be shown:
<li class="selected">Tab 3</li>
If you expect a more feature-rich version of the tabber, you can use the advanced version of the script, Responsive Tabs (jQuery Tabs):
- URL support: a hash id in the URL can select a tab
- Bookmark support: select a tab via bookmark anchor
- Select tabs by mouse over
- Auto advance
- Smooth transitional effect
- Content can retrieved from other documents or pages through Ajax
- ... and more
Clicking the download button above and you will get the package that contains the source code, templates and a demo page of the Tab Content UI component.