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-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" 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>
也可以使用 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来实现了
下面的实例演示了以不同的方式来激活各个标签页:
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页(从 0 开始索引)
$('#myTab li:eq(2) a').tab('show')
实现原理
1、单击一个元素时,首先将原来高亮的元素取消
2、然后给被单击元素进行高亮
3、如果单击元素是下拉框中某个选项,则选中本身,还要选中下拉框
4、如果定义了动画,先执行动画,然后回调