同樣的，選項卡也定義data屬性來觸發(fā)切換效果。當(dāng)然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發(fā)選項卡需要滿足以下幾點要求：
1、選項卡導(dǎo)航鏈接中要設(shè)置 data-toggle="tab"
2、并且設(shè)置 data-target="對應(yīng)內(nèi)容面板的選擇符(一般是ID)";
如果是鏈接的話，還可以通過 href="對應(yīng)內(nèi)容面板的選擇符(一般是ID)"
主要起的作用是用戶點擊的時候能找到該選擇符所對應(yīng)的面板內(nèi)容 tab-pane。
3、面板內(nèi)容統(tǒng)一放在 tab-content 容器中，而且每個內(nèi)容面板 tab-pane 都需要設(shè)置一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配。
代碼如下所示：
<!-- 選項卡組件（菜單項nav-tabs）-->
<ul id="myTab" class="nav nav-tabs" role="tablist">
<li class="active"><a href="#bulletin" role="tab" data-toggle="tab">公告</a></li>
<li><a href="#rule" role="tab" data-toggle="tab">規(guī)則</a></li>
<li><a href="#forum" role="tab" data-toggle="tab">論壇</a></li>
<li><a href="#security" role="tab" data-toggle="tab">安全</a></li>
<li><a href="#welfare" role="tab" data-toggle="tab">公益</a></li>
</ul>
<!-- 選項卡面板 -->
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="bulletin">公告內(nèi)容面板</div>
<div class="tab-pane fade" id="rule">規(guī)則內(nèi)容面板</div>
<div class="tab-pane fade" id="forum">論壇內(nèi)容面板</div>
<div class="tab-pane fade" id="security">安全內(nèi)容面板</div>
<div class="tab-pane fade" id="welfare">公益內(nèi)容面板</div>
</div>
運行效果如下：
我來試試：制作一個選項卡
補充右側(cè)代碼編輯器代碼來完成一個可以觸發(fā)切換的選項卡。
請驗證，完成請求
由于請求次數(shù)過多，請先驗證，完成再次請求
打開微信掃碼自動綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書簽
舉報