Tabs 包含了 .tab-nav
以及 .tab-content
兩個主要區塊。每個 .tab-nav
的項目皆為 .tab-nav-item
,Tabs 的連結為 .tab-link
。
.tab-content
預設為 display: none;
,當加上 .active
時才會顯示。另外,作用中的 .tab-nav-item
請加上 .active
,如果你要使用 jQuery UI 的 Tabs 套件,那麼 .tab-content
與 .tab-nav-item
兩者都不需要使用 .active
。
<div class="tab">
<ul class="tab-nav">
<li class="tab-nav-item active">
<a href="#tab1" class="tab-link">Tab 1</a>
</li>
<li class="tab-nav-item">
<a href="#tab2" class="tab-link">Tab 2</a>
</li>
<li class="tab-nav-item">
<a href="#tab3" class="tab-link">Tab 3</a>
</li>
</ul>
<div id="tab1" class="tab-content active">
~略~
</div>
<div id="tab2" class="tab-content">
~略~
</div>
<div id="tab3" class="tab-content">
~略~
</div>
</div>