How to Use CSS Naming Rules Basic Styles Components
Elements
Button Input Radio&Checkbox On-off Select Datetimepicker Dropdown
Layout
Grid Form
Data Display
Tab Table Pagination Badge Process
Feedback
Dialog Message Tooltip PopConfirm Loader
Other
Breadcrumb SideNav
I18N

Tabs

The toggle effect of the tabs is initialized via event delegation inzui.js.


Default style

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.


Tab1
Tab2
Tab3
Tab4
Baidu
content1
content2
content3
content4

    <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>
            

Condensed

Daily
Weekly
Monthly

    <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>
            

Size

Tab1
Tab2
Tab3

Tab1
Tab2
Tab3

Tab1
Tab2
Tab3

    <div class="z-tabs small">
        ...
    </div>
    <div class="z-tabs">
        ...
    </div>
    <div class="z-tabs large">
        ...
    </div>