The toggle effect of the tabs is initialized via event delegation inzui.js.
Use class.z-tabsand.z-tabto create Tabs. Use class.z-tab-contentand.z-tab-paneto create tab-contents. The value of thetab's attribute:data-contentis the content element's id.
Initially, there should be an active tab. You need to add class.activeon the active tab and its content element.
When you click a tab, the status will change and the target content will show itself.
A tab can also refers to a link. Just see the example below.
<div class="z-tabs">
<div data-content="#con1" class="z-tab active" tabindex="0">Tab1</div>
<div data-content="#con2" class="z-tab" tabindex="0"><i class="fa fa-apple"></i>Tab2</div>
<div data-content="#con3" class="z-tab" tabindex="0">Tab3</div>
<div data-content="#con4" class="z-tab disabled">Tab4</div>
<a href="http://www.baidu.com" class="z-tab" tabindex="0">Baidu</a>
</div>
<div class="z-tab-content">
<div class="z-tab-pane active" id="con1">content1</div>
<div class="z-tab-pane" id="con2">content2</div>
<div class="z-tab-pane" id="con3">content3</div>
<div class="z-tab-pane" id="con4">content4</div>
</div>
<div class="z-tabs condensed">
<div class="z-tab active" tabindex="0">Daily</div>
<div class="z-tab" tabindex="0">Weekly</div>
<div class="z-tab" tabindex="0">Monthly</div>
</div>
<div class="z-tabs small">
...
</div>
<div class="z-tabs">
...
</div>
<div class="z-tabs large">
...
</div>