浅析Bootstrap中Tab（标签页）的使用方法

Bootstrap 导航元素使用相同的标记和基类，改变修饰的class，可以在不同的样式间进行切换

如".nav-pills"（胶囊式导航）与 ".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>

通过 JavaScript：

也可以使用 Javscript 来启用标签页，如下所示：

$(function () {

$('#myTab a:last').tab('show');

$('#myTab a').click(function (e) {

e.preventDefault();

$(this).tab('show');

})

})

 注：如果你想用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')

$('#myTab li:eq(2) a').tab('show')</pre><br>

实现原理

1、单击一个元素时，首先将原来高亮的元素取消

2、然后给被单击元素进行高亮

3、如果单击元素是下拉框中某个选项，则选中本身，还要选中下拉框

4、如果定义了动画，先执行动画，然后回调

相关知识

浅析Bootstrap中Tab（标签页）的使用方法
Bootstrap宠物商店模板
监听浏览器自带刷新、前进、回退、关闭标签页、切换标签页
手机怎么录制屏幕的视频 录屏大师使用方法教程
狗狗宠物俱乐部单页模板
浅析人像拍摄中“道具”的选择和使用
宠物手术器械：手术刀、缝合针、电刀的分类和使用方法
浅析宠物饲养对学生身心健康的影响
宠物狗训练服务中心响应式网页模板开发教程
jquery实现a标签跳转（href=“index.html”）

网址: 浅析Bootstrap中Tab（标签页）的使用方法 https://www.mcbbbk.com/newsview707055.html