一個選項卡主要包括兩個部分，其一是菜單項，其二是內容面板。拿下面的示例來做演示。其HTML結構如下：
<!-- 選項卡組件（菜單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab">公告</a></li>
<li><a href="#rule" role="tab">規則</a></li>
<li><a href="#forum" role="tab">論壇</a></li>
<li><a href="#security" role="tab">安全</a></li>
<li><a href="#welfare" role="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內容面板</div>
<div class="tab-pane fade" id="rule">規則內容面板</div>
<div class="tab-pane fade" id="forum">論壇內容面板</div>
<div class="tab-pane fade" id="security">安全內容面板</div>
<div class="tab-pane fade" id="welfare">公益內容面板</div>
</div>
關鍵一點，選項卡中鏈接的錨點要與對應的面板內容容器的ID相匹配。
在Bootstrap框架中選項卡nav-tabs已帶有樣式，前面在介紹導航一節中有詳細介紹。而對于面板內容tab-pane都是隱藏的，只有當前面板內容才是顯示的：
/*bootstrap.css文件第3758行～第3763行*/
.tab-content > .tab-pane {
display: none;
}
.tab-content > .active {
display: block;
}
運行效果見最右側結果窗口：
但這個Tabs沒有任何交互功能，點擊選項卡不會進行內容的切換。不過不用急，接下來的內容將告訴你如何實現內容與選項卡之間的切換。
請驗證，完成請求
由于請求次數過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報