bootstrap选项卡使用方法解析
选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容
Bootstrap框架中的选项卡主要有两部分内容组成：
选项卡组件（也就是菜单组件），对应的是Bootstrap的nav-tabs）
底部可以切换的选项卡面板，在Bootstrap中通常tab-pane来表示.
<!--选项卡组件（菜单项nav-tabs）--> <ulid="myTab"class="navnav-tabs"role="tablist"> <liclass="active"><ahref="#bulletin"role="tab"data-toggle="tab">公告</a></li> <li><ahref="#rule"role="tab"data-toggle="tab">规则</a></li> <li><ahref="#forum"role="tab"data-toggle="tab">论坛</a></li> <li><ahref="#security"role="tab"data-toggle="tab">安全</a></li> <li><ahref="#welfare"role="tab"data-toggle="tab">公益</a></li> </ul> <!--选项卡面板--> <divid="myTabContent"class="tab-content"> <divclass="tab-paneactive"id="bulletin">公告内容面板</div> <divclass="tab-pane"id="rule">规则内容面板</div> <divclass="tab-pane"id="forum">论坛内容面板</div> <divclass="tab-pane"id="security">安全内容面板</div> <divclass="tab-pane"id="welfare">公益内容面板</div> </div> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <scriptsrc="https://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）--> <ulid="myTab"class="navnav-tabs"role="tablist"> <liclass="active"><ahref="#bulletin"role="tab"data-toggle="tab">公告</a></li> <li><ahref="#rule"role="tab"data-toggle="tab">规则</a></li> <li><ahref="#forum"role="tab"data-toggle="tab">论坛</a></li> <li><ahref="#security"role="tab"data-toggle="tab">安全</a></li> <li><ahref="#welfare"role="tab"data-toggle="tab">公益</a></li> </ul> <!--选项卡面板--> <divid="myTabContent"class="tab-content"> <divclass="tab-panefadeinactive"id="bulletin">公告内容面板</div> <divclass="tab-panefade"id="rule">规则内容面板</div> <divclass="tab-panefade"id="forum">论坛内容面板</div> <divclass="tab-panefade"id="security">安全内容面板</div> <divclass="tab-panefade"id="welfare">公益内容面板</div> </div> <scriptsrc="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <scriptsrc="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）--> <ulid="myTab"class="navnav-pills"role="tablist"> <liclass="active"><ahref="#bulletin"role="tab"data-toggle="pill">公告</a></li> <li><ahref="#rule"role="tab"data-toggle="pill">规则</a></li> <li><ahref="#forum"role="tab"data-toggle="pill">论坛</a></li> <li><ahref="#security"role="tab"data-toggle="pill">安全</a></li> <li><ahref="#welfare"role="tab"data-toggle="pill">公益</a></li> </ul> <!--选项卡面板--> <divid="myTabContent"class="tab-content"> <divclass="tab-panefadeinactive"id="bulletin">公告内容面板</div> <divclass="tab-panefade"id="rule">规则内容面板</div> <divclass="tab-panefade"id="forum">论坛内容面板</div> <divclass="tab-panefade"id="security">安全内容面板</div> <divclass="tab-panefade"id="welfare">公益内容面板</div> </div>
选项卡–JavaScript触发方法
在每个链接的单击事件中调用tab(“show”)方法，显示对应的标签面板内容。针对上面的示例，删除HTML中自定义的data-toggle=”tab”或data-toggle=”pill”的属性，然后通过下面的脚本来调用：
$(function(){
$("#myTaba").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
实例：
<!--选项卡组件（菜单项nav-tabs）-->
<ulid="myTab2"class="navnav-tabs"role="tablist">
<li><ahref="#a"role="tab">娱乐</a></li>
<li><ahref="#b"role="tab">房产</a></li>
<li><ahref="#c"role="tab">国内</a></li>
<li><ahref="#d"role="tab">国外</a></li>
</ul>
<!--选项卡面板-->
<divid="myTabContent2"class="tab-content">
<divclass="tab-panefadeinactive"id="a">娱乐内容面板</div>
<divclass="tab-panefade"id="b">房产内容面板</div>
<divclass="tab-panefade"id="c">国内内容面板</div>
<divclass="tab-panefade"id="d">国外内容面板</div>
</div>
<script>
$(function(){
$("#myTab2a").click(function(e){
e.preventDefault();
$(this).tab("show");
});
})
</script>
下文点击查看
如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：
Bootstrap学习教程
Bootstrap实战教程
BootstrapTable使用教程
Bootstrap插件使用教程
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。