tabs
v0.2.0
Published
pure javascript implementation that quickly makes the markup tabbable
Downloads
5,976
Readme
##Usage:
First you should build the markup as follows, 'tab' and 'tab-pane' are required, use them to indicate which are tabs and content panes.
<div class="tab-container">
<div class="tabs">
<a class="tab active">Home</a>
<a class="tab">Profile</a>
<a class="tab">Messages</a>
</div>
<div class="tab-panes">
<div class="tab-pane active">home</div>
<div class="tab-pane">profile</div>
<div class="tab-pane" >message</div>
</div>
</div>
And with the styles that hides the non-active tab pane
.tab-panes .tab-pane{
display: none
}
.tab-panes .active{
display: block
}
Finally makes the markup tabbable. After a tab is clicked, the 'active' class will be added to the corresponding tab:
//commonjs
var tabs = require('tabs');
//or directly include the script and 'tabs' will be global
// make it tabbable!
var container=document.querySelector('.tab-container')
tabs(container);
##Example:
See http://ltebean.github.io/tabs