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"> <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
|
原文链接: 8.5.5 标签页事件