选项卡

概述用法

选项卡组件由一些并列的可点击选项卡标签组成。


由.tabs-btn类启动绑定或data-toggle="tab"绑定。a的锚点或data-taget="#id"对应内容项


若要禁止tab插件绑定，只要在.tabs-btn上添加.tabs-disabled类。比如直接链接跳转


样式上控制参照UI规范


tab one content
tab two content
tab three content 
<ul class="tabs">
        <li class="active">
            <a href="#ttp1" class="tabs-btn" aria-expanded="true">
            tab one
            </a>
        </li>
        <li>...</li>
    </ul>

事件监听


show.ui.tab监听弹层显示前


hide.ui.tab监听弹层关闭前


shown.ui.tab监听弹层显示后


hiden.ui.tab监听弹层显示后


tab one content
tab two content
tab three content 
$('#j-tab-2 .tabs-btn').on('show.ui.tab', function(){ alert('显示前show')})
$('#j-tab-2 .tabs-btn').on('shown.ui.tab', function(){ alert('显示后shown')})
$('#j-tab-2 .tabs-btn').on('hide.ui.tab', function(){ alert('关闭前hide')})
$('#j-tab-2 .tabs-btn').on('hidden.ui.tab', function(){ alert('关闭后hidden')})