bootstrap常用组件(四)-标签页Tab插件

大石头的笔记
262 阅读6分钟
【简介】
Bootstrap
为我们提供一个
tab
插件，可以快速的完成一个
tab
栏的标签页切换。
【引入文件】
需要引入的文件有bootstrap的css样式文件。因为bootstrap是基于jquery的，所以要先引入jq文件，再引入bootstrap的js文件。
[HTML]
纯文本查看
复制代码
1
2
3
4
5
<link rel="stylesheet" href="lib/css/bootstrap.css">
<script src="lib/js/jquery.v1.12.4.js"></script>
<script src="lib/js/bootstrap.js"></script>
【用法】
1. 通过data属性：
通过 data 属性：需要添加 data-toggle="tab" 或data-toggle="pill" 到锚文本链接中。
添加 nav 和 nav-tabs 类到 ul 中，将会应用 Bootstrap 标签样式，添加 nav 和 nav-pills 类到 ul 中，将会应用 Bootstrap 胶囊式样式。
Html代码结构
[HTML]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!-- Bootstrap 标签样式 -->
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
传智-前端与移动开发
</a>
</li>
<li><a href="#java" data-toggle="tab">javaEE</a></li>
<li><a href="#ul" data-toggle="tab">UI设计</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="java">
<p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="ul">
<p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
</div>
<!-- Bootstrap 胶囊式样式 -->
<ul id="myTab1" class="nav nav-pills">
<li class="active">
<a href="#home1" data-toggle="pill">
传智-前端与移动开发
</a>
</li>
<li><a href="#java1" data-toggle="pill">javaEE</a></li>
<li><a href="#ul1" data-toggle="pill">UI设计</a></li>
</ul>
<div id="myTabContent1" class="tab-content">
<div class="tab-pane fade in active" id="home1">
<p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="java1">
<p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="ul1">
<p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
</div>
效果
1. Bootstrap 标签样式效果
2. Bootstrap 胶囊式样式效果
2.
通过
JavaScript
：可以使用
Javascript
来启用标签页，如下所示：
[JavaScript]
纯文本查看
复制代码
1
2
3
4
5
6
$('#myTab a').click(function (e) {[/align]
e.preventDefault()
$(this).tab('show')
})
下面的实例演示了以不同的方式来激活各个标签页
[JavaScript]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
// 通过名称选取标签页
$('#myTab a[href="#profile"]').tab('show')
// 选取第一个标签页
$('#myTab a:first').tab('show')
// 选取最后一个标签页
$('#myTab a:last').tab('show')
// 选取第三个标签页（从 0 开始索引）
$('#myTab li:eq(2) a').tab('show')
【淡入淡出效果】
如果需要为标签页设置淡入淡出效果，添加 .fade 到每个 .tab-pane 后面。第一个标签页必须添加 .in 类，以便淡入显示初始内容
[HTML]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
<div class="tab-content">
<div class="tab-pane fade in active" id="home">...</div>
<div class="tab-pane fade" id="svn">...</div>
<div class="tab-pane fade" id="ios">...</div>
<div class="tab-pane fade" id="java">...</div>
</div>
【事件】
shown.bs.tab :
该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用
event.target
和
event.relatedTarget
来定位到激活的标签页和前一个激活的标签页。
代码如下：
[HTML]
纯文本查看
复制代码
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
<p class="active-tab"><strong>激活的标签页</strong>：<span></span></p>[/align]
<p class="previous-tab"><strong>前一个激活的标签页</strong>：<span></span></p>
<ul id="myTab" class="nav nav-tabs">
<li class="active">
<a href="#home" data-toggle="tab">
传智-前端与移动开发
</a>
</li>
<li><a href="#java" data-toggle="tab">javaEE</a></li>
<li><a href="#ul" data-toggle="tab">UI设计</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>111111传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="java">
<p>22222传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
<div class="tab-pane fade" id="ul">
<p>33333传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客传智播客</p>
</div>
</div>
<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
// 获取已激活的标签页的名称
var activeTab = $(e.target).text();
// 获取前一个激活的标签页的名称
var previousTab = $(e.relatedTarget).text();
$(".active-tab span").html(activeTab);
$(".previous-tab span").html(previousTab);
});
</script>
效果如下：


avatar
文章
阅读
粉丝