选项卡Tabs是Web中一种非常常用的功能。用户点击或悬浮对应的菜单项，能切换出对应的内容
Bootstrap框架中的选项卡主要有两部分内容组成：
选项卡组件（也就是菜单组件），对应的是 Bootstrap的 nav-tabs）
底部可以切换的选项卡面板，在 Bootstrap 中通常 tab-pane 来表示.
<!-- 选项卡组件（菜单项nav-tabs）--> <ul role="tablist"> <li><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> <div>公告内容面板</div> <div>规则内容面板</div> <div>论坛内容面板</div> <div>安全内容面板</div> <div>公益内容面板</div> </div> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="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=https://www.jb51.net/”对应内容面板的选择符(一般是ID)”;
如果是链接的话，还可以通过 href=https://www.jb51.net/”对应内容面板的选择符(一般是ID)”
主要起的作用是用户点击的时候能找到该选择符所对应的面板内容 tab-pane。
3、面板内容统一放在 tab-content 容器中，而且每个内容面板 tab-pane 都需要设置一个独立的选择符（最好是ID）与选项卡中的 data-target 或 href 的值匹配。
选项卡–为选择卡添加fade样式
为了让面板的隐藏与显示在切换的过程效果更流畅，可以在面板中添加类名 fade，让其产生渐入的效果。
在添加 fade 样式时，最初的默认显示的内容面板一定要记得加上 in 类名，不然其内容用户无法看到
<!-- 选项卡组件（菜单项nav-tabs）--> <ul role="tablist"> <li><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> <div>公告内容面板</div> <div>规则内容面板</div> <div>论坛内容面板</div> <div>安全内容面板</div> <div>公益内容面板</div> </div> <script src="https://libs.baidu.com/jquery/1.9.0/jquery.js"></script> <script src="https://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 role="tablist"> <li><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> <div>公告内容面板</div> <div>规则内容面板</div> <div>论坛内容面板</div> <div>安全内容面板</div> <div>公益内容面板</div> </div>
选项卡–JavaScript触发方法