選項卡Tabs是Web中一種非常常用的功能。用戶點擊或懸浮對應的菜單項，能切換出對應的內容
Bootstrap框架中的選項卡主要有兩部分內容組成：
選項卡組件（也就是菜單組件），對應的是 Bootstrap的 nav-tabs）
底部可以切換的選項卡面板，在 Bootstrap 中通常 tab-pane 來表示.
<!-- 選項卡組件（菜單項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">規則</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 active" id="bulletin">公告內容面板</div> <div class="tab-pane" id="rule">規則內容面板</div> <div class="tab-pane" id="forum">論壇內容面板</div> <div class="tab-pane" id="security">安全內容面板</div> <div class="tab-pane" id="welfare">公益內容面板</div></div><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項卡–選項卡的結構
一個選項卡主要包括兩個部分，其一是菜單項，其二是內容面板。
關鍵一點，選項卡中鏈接的錨點要與對應的面板內容容器的ID相匹配。
對于面板內容tab-pane都是隱藏的，只有當前面板內容才是顯示的：
css源碼：
.tab-content > .tab-pane { display: none;}.tab-content > .active { display: block;}選項卡–觸發切換效果
選項卡也定義data屬性來觸發切換效果。當然前提你也要先加載bootstrap.js或者是tab.js。聲明式觸發選項卡需要滿足以下幾點要求：
1、選項卡導航鏈接中要設置 data-toggle=”tab”
2、并且設置 data-target=”對應內容面板的選擇符(一般是ID)”;
如果是鏈接的話，還可以通過 href=”對應內容面板的選擇符(一般是ID)”
主要起的作用是用戶點擊的時候能找到該選擇符所對應的面板內容 tab-pane。
3、面板內容統一放在 tab-content 容器中，而且每個內容面板 tab-pane 都需要設置一個獨立的選擇符（最好是ID）與選項卡中的 data-target 或 href 的值匹配。
選項卡–為選擇卡添加fade樣式
為了讓面板的隱藏與顯示在切換的過程效果更流暢，可以在面板中添加類名 fade，讓其產生漸入的效果。
在添加 fade 樣式時，最初的默認顯示的內容面板一定要記得加上 in 類名，不然其內容用戶無法看到
<!-- 選項卡組件（菜單項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">規則</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">公告內容面板</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><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
選項卡–膠囊式選項卡（nav-pills）
在Bootstrap除了可以讓 nav-tabs 具有選項卡的切換功能之外，還可以對膠囊式 nav-pills 導航也具有選項卡的功能。我們只需要將 nav-tabs 換成 nav-pills，另外關鍵一點是將 data-toggle=”tab”換成data-toggle=”pill”。
<!-- 選項卡組件（菜單項nav-pills）--><ul id="myTab" class="nav nav-pills" role="tablist"> <li class="active"><a href="#bulletin" role="tab" data-toggle="pill">公告</a></li> <li><a href="#rule" role="tab" data-toggle="pill">規則</a></li> <li><a href="#forum" role="tab" data-toggle="pill">論壇</a></li> <li><a href="#security" role="tab" data-toggle="pill">安全</a></li> <li><a href="#welfare" role="tab" data-toggle="pill">公益</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>
選項卡–JavaScript觸發方法
在每個鏈接的單擊事件中調用tab(“show”)方法，顯示對應的標簽面板內容。針對上面的示例，刪除HTML中自定義的 data-toggle=”tab” 或 data-toggle=”pill” 的屬性，然后通過下面的腳本來調用：
$(function(){ $("#myTab a").click(function(e){ e.preventDefault(); $(this).tab("show"); });})實例 ：<!-- 選項卡組件（菜單項nav-tabs）--><ul id="myTab2" class="nav nav-tabs" role="tablist"> <li><a href="#a" role="tab">娛樂</a></li> <li><a href="#b" role="tab">房產</a></li> <li><a href="#c" role="tab">國內</a></li> <li><a href="#d" role="tab">國外</a></li> </ul><!-- 選項卡面板 --><div id="myTabContent2" class="tab-content"> <div class="tab-pane fade in active" id="a">娛樂內容面板</div> <div class="tab-pane fade" id="b">房產內容面板</div> <div class="tab-pane fade" id="c">國內內容面板</div> <div class="tab-pane fade" id="d">國外內容面板</div> </div><script> $(function(){ $("#myTab2 a").click(function(e){ e.preventDefault(); $(this).tab("show"); });})</script>下文點擊查看
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VeVb武林網。
新聞熱點
疑難解答
