浅析Bootstrap中Tab（标签页）的使⽤⽅法
Bootstrap 导航元素使⽤相同的标记和基类，改变修饰的class，可以在不同的样式间进⾏切换
如".nav-pills"（胶囊式导航）与 “.nav-tabs” （标签式导航）
创建⼀个标签式的导航菜单：
以⼀个带有class .nav的⽆序列表开始。
添加 class .nav-tabs。
下⾯的实例演⽰了这点：
<!-- 导航区 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>
<li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>
<li role="presentation"><a href="#messages" role="tab" data-toggle="tab">Messages</a></li>
<li role="presentation"><a href="#settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<!-- ⾯板区 -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
结果如下显⽰：
创建⼀个胶囊式的导航菜单：
如果需要把标签改成胶囊的样式，只需要使⽤".nav-pills"
代替".nav-tabs"即可，其他的步骤与上⾯相同。
结果如下所⽰：
标签页⽤法
标签页组件分为两部分，导航区与⾯板区。导航区⽤于绑定点击事件，切换对应的⾯板。
导航区为⼀个<ul>列表，要求<ul>带"nav nav-tabs“或”nav nav-pills"这两种类名。<li>下的标签要求有data-toggle="tab"属性，你可以通过data-target或href指定对应的⾯板。
⾯板区容器要求带"tab-content“类名，下⾯的每个⾯板都要求带”tab-pane"类名。
通过 data 属性：
添加data-toggle="tab"或data-toggle="pill"到导航区ul中来启⽤标签页。
添加nav和nav-tabs类到导航区ul中，将会应⽤ Bootstrap标签样式，添加nav和nav-pills类到导航区ul中，将会应⽤Bootstrap胶囊式样式。
这样你直接引⼊ bootstrap.js 就能⽤了，但你必须为当中某个标签页的<li>元素指定"active"类名(active：激活当前对象)
<!-- 导航区 -->
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">Home</a></li>    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">Profile</a></li>  <li role="presentation"><a href="#messages </ul>
<!-- ⾯板区 -->
<div class="tab-content">    <div role="tabpanel" class="tab-pane active" id="home">...</div>
<div role="tabpanel" class="tab-pane" id="profile">...</div>
<div role="tabpanel" class="tab-pane" id="messages">...</div>
<div role="tabpanel" class="tab-pane" id="settings">...</div>
</div>
通过JavaScript：
也可以使⽤Javscript来启⽤标签页，如下所⽰：
$(function () {
$('#myTab a:last').tab('show');//初始化显⽰哪个tab
$('#myTab a').click(function (e) {
e.preventDefault();//阻⽌a链接的跳转⾏为
$(this).tab('show');//显⽰当前选中的链接及关联的content
})
})
注：
如果你想⽤JavaScript明确指定哪个⾯板被激活，你要对它的某个标签页的链接使⽤tab("show")⽅法，⽽不是作⽤于它的容器上。并且如果使⽤javascript实现这种导航
内容的切换，a标签中⽆须再添加data-toggle='tab'，当然，如果每个a链接都使⽤了此属性，那完全没有必要在⽤js来实现了
下⾯的实例演⽰了以不同的⽅式来激活各个标签页：
// 通过名称选取标签页
为什么使用bootstrap?$('#myTab a[href="#profile"]').tab('show')
// 选取第⼀个标签页
$('#myTab a:first').tab('show')
// 选取最后⼀个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）      $('#myTab li:eq(2) a').tab('show')

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。