0%

8.5.5 标签页事件

8.5.5 标签页事件

Bootstrap为导航标签提供了如下事件。

事件 描述
show.bs.tab 当指定标签开始显示时触发该事件。
shown.bs.tab 当指定标签完全显示出来时触发该事件。
hide.bs.tab 当指定标签开始隐藏时触发该事件。
hidden.bs.tab 当指定标签完全隐藏时触发该事件。
## javascript事件属性 ##
### target事件属性 ###
target事件属性可返回事件的目标节点,也就是触发该事件的节点.
### relatedTarget事件属性 ###
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">
<!-- data-toggle="tab"表示该标签可触发标签页 -->
<a href="#java" data-toggle="tab">疯狂Java讲义</a>
</li>
<li>
<!-- data-toggle="tab"表示该标签可触发标签页 -->
<a href="#android" data-toggle="tab">疯狂Android讲义</a>
</li>
<!-- 下拉菜单 -->
<li class="dropdown">
<!-- data-toggle="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.tabhidden.bs.tab 两个事件;
    • 此时可以通过该事件对象的relatedTarget属性获取要显示的标签(第二个标签)
  • 再次单击第一个标签(#java标签),标签页显示第一个标签,因此将会依次触发第一个标签show.bs.tabshown.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

原文链接: 8.5.5 标签页事件