About tabs.js
tabs.js is a JavaScript class that will help you turn a regular set of anchor links into tabs.
Advantages
- tabs.js manipulates URL fragments, so that bookmarking or sharing a link will preserve the opened tabs (can be turned off if undesired)
- tabs.js has very little markup requirements and does not set any CSS rules, just classes and attributes
- tabs.js encourages markup that will still work perfectly for users without JavaScript
Features
tabs.js is rather small (~3KB minified), supports multiple tab sets as well as nested tabs and can be configured to suit most needs.
Markup requirements
- Have some links that target your tabs (using hashtags and IDs)
- Make sure those links are within an element that has the
data-tabsattribute - Make sure the actual tab content elements have the correct IDs set (to match the links)
Usage
For every tabset on your page, create a new Tabs() instance, then call init() on it. If you don't need to refer to the instance later on, this can be done very compact: (new Tabs()).init();
Styling your tabs
It depends a bit on how you structure your markup. Check the CSS code used in this very page for some pointers in the right direction.