tinytabs
tinytabs is a tiny (1.3 KB minified) Javascript tabbing library. Zero dependencies. All you need is a few layers in a container layer, and bam, tabbed interface. If Javascript is not enabled, it degrades nicely too.
Documentation and Demo: https://nadh.in/code/tinytabs
Example
HTML
<!-- Include the CSS file in <head> //--> <!-- Content to tab //--> Music Content here Videos Content
Options
anchor | true (default) or false. If enabled, when a tab is clicked, it's id is set in url's fragment so that the tab is retained on page reloads. Also enables linking to a tab directly. Eg: http://nadh.in/code/tinytabs#tab-example |
---|---|
hideTitle | true (default) or falseHide the title element within section elements. |
sectionClass | Section element's class. Default is section. |
tabsClass | Tab (ul) container's class. Default is tabs. |
tabClass | Individual tab's (li) class. Default is tab. |
titleClass | Title element's tag. Default is title. |
before | function(id, tab). Callback function that gets evaluated before a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |
after | function(id, tab). Callback function that gets evaluated after a tab is activated. The first arg is the id of the tab and the second is the DOM element of the tab. |
MIT License.