8.5.5 标签页事件
Bootstrap为导航标签提供了如下事件。
| 事件 |
描述 |
show.bs.tab |
当指定标签开始显示时触发该事件。 |
shown.bs.tab |
当指定标签完全显示出来时触发该事件。 |
hide.bs.tab |
当指定标签开始隐藏时触发该事件。 |
hidden.bs.tab |
当指定标签完全隐藏时触发该事件。 |
javascript事件属性
target事件属性
target事件属性可返回事件的目标节点,也就是触发该事件的节点.
relatedTarget事件属性返回与事件的目标节点相关的节点。
- 对于
mouseover事件来说,该属性是鼠标指针移到目标节点上时所离开的那个节点。
- 对于
mouseout事件来说,该属性是离开目标时,鼠标指针进入的节点。
- 对于其他类型的事件来说,这个属性没有用。
当某个导航标签上的事件监听函数被触发时,程序可通过事件的target属性获取该事件当前的事件源,比如单击某个导航标签,该导航标签即显示出来,那么该事件的target属性就返回当前被单击的导航标签。
此外,事件的relatedTarget 属性则获取当前事件所关联的事件源,比如单击某个导航标签,该操作将会导致另一个之前显示的标签被隐藏起来,那么该事件的relatedTarget属性就返回即将被隐藏的导航标签。
程序示例
下面代码示范了标签页的事件的用法。
1
2
3
4
5
6
7
8
9
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
| <!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title> 标签页事件 </title>
<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="../bootstrap/css/bootstrap-theme.min.css">
<script type="text/javascript" src="../jquery-3.1.1.js"></script>
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-tabs">
<li class="active">
<a href="#java" data-toggle="tab">疯狂Java讲义</a>
</li>
<li>
<a href="#android" data-toggle="tab">疯狂Android讲义</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true"
aria-expanded="false">前端图书
<span class="caret"></span>
</a>
<ul class="dropdown-menu">
<li><a href="#html" data-toggle="tab">疯狂HTML 5讲义</a></li>
<li role="separator" class="divider"></li>
<li><a href="#front" data-toggle="tab">疯狂前端开发讲义</a></li>
</ul>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="java">
<h3>疯狂Java讲义</h3>
<p>必读的Java学习经典，你懂的，不多说。</p>
</div>
<div class="tab-pane" id="android">
<h3>疯狂Android讲义</h3>
<p>最全面、最详细的Android学习图书，全面覆盖Android开发手册</p>
</div>
<div class="tab-pane" id="html">
<h3>疯狂HTML 5讲义</h3>
<p>全面、细致的前端开发基础图书，全面深入介绍HTML 5/CSS 3/JavaScript知识。</p>
</div>
<div class="tab-pane" id="front">
<h3>疯狂前端开发讲义</h3>
<p>前端开发的进阶图书，全面深入介绍jQuery/AngularJS/Bootstrap等框架。</p>
</div>
</div>
</div>
<script type="text/javascript">
$(".nav-tabs a").first().on('show.bs.tab', function (e) {
console.log('触发show事件的元素:' + e.target.getAttribute("href") + ",离开的元素：" + e.relatedTarget.getAttribute(
"href"));
}).on('shown.bs.tab', function (e) {
console.log('触发shown事件的元素:' + e.target.getAttribute("href") + ",离开的元素：" + e.relatedTarget.getAttribute(
"href"));
}).on('hide.bs.tab', function (e) {
console.log('触发hide事件的元素:' + e.target.getAttribute("href") + ",进入的元素：" + e.relatedTarget.getAttribute(
"href"));
}).on('hidden.bs.tab', function (e) {
console.log('触发hidden事件的元素:' + e.target.getAttribute("href") + ",进入的元素：" + e.relatedTarget.getAttribute(
"href"));
})
</script>
</body>
</html>
|
在该示例中,为标签页中第一个标签的4个事件都绑定了事件处理函数,这样无论第一个标签上发生哪种事件,这些事件处理函数都会被触发。
浏览该页面时,系统默认显示第一个标签。
- 单击第二个标签(
#android标签),标签页将会隐藏第一个标签,因此将会依次触发第一个标签hide.bs.tab、hidden.bs.tab 两个事件;
- 此时可以通过该事件对象的
relatedTarget属性获取要显示的标签(第二个标签)
- 再次单击第一个标签(
#java标签),标签页显示第一个标签,因此将会依次触发第一个标签show.bs.tab、shown.bs.tab两个事件。
- 此时可以通过该事件对象的
relatedTarget属性获取要隐藏的标签(第二个标签)
控制台输出如下:
1
2
3
4
| 触发hide事件的元素:#java,进入的元素：#android tab-content-event.html:72:12
触发hidden事件的元素:#java,进入的元素：#android tab-content-event.html:75:12
触发show事件的元素:#java,离开的元素：#android tab-content-event.html:66:12
触发shown事件的元素:#java,离开的元素：#android tab-content-event.html:69:12
|