Bootstrap标签页(Tab)插件事件
事件
下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。
| 事件 | 描述 | 实例 |
|---|---|---|
| show.bs.tab | 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 |
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
|
| shown.bs.tab | 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 |
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
|
实例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<meta charset="utf-8" />
<meta name="viewport"content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="bootstrap-3.3.5-dist/css/bootstrap.min.css" />
<script src="jQuery/jquery-2.1.4.js"></script>
<script src="bootstrap-3.3.5-dist/js/bootstrap.min.js"></script>
</head>
<body>
<div style="padding:20px">
<hr />
<p class="active-tab">当前激活标签的名称：<span></span></p>
<p class="previous-tab">前一个激活标签的名称：<span></span></p>
<hr />
<ul class="nav nav-tabs"role="navigation"id="myTab">
<li class="active"><a href="#html5">Html5</a></li>
<li><a href="#css3">Css3</a></li>
<li><a href="#javascript">Javascript</a></li>
<li><a href="#jquery">jQuery</a></li>
<li><a href="#jqueryui">jQueryUI</a></li>
<li><a href="#bootstrap">Bootstrap</a></li>
<li><a href="#angularjs">AngularJS</a></li>
<li><a href="#cnet">C#.Net</a></li>
<li><a href="#mssql">MsSql</a></li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active"id="html5">
<h2>Html5简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="css3">
<h2>Css3简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade"id="javascript">
<h2>Javascript简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="jquery">
<h2>jQuery简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="jqueryui">
<h2>jQueryui简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="bootstrap">
<h2>Bootstrap简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="angularjs">
<h2>AngularJS简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="cnet">
<h2>C#.Net简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
<div class="tab-pane fade" id="mssql">
<h2>MsSql简介</h2>
<p>在这里可写其他的一些您想功能的代码</p>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#myTab a").click(function (e) {
e.preventDefault();
$(this).tab("show");
});
$("#myTab a").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>
</body>
</html>
Bootstrap标签页(Tab)插件事件的更多相关文章
- Bootstrap标签页(Tab)插件
标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...
- 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- 解决Bootstrap标签页(Tab)插件切换echarts不显示问题
1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...
- bootstrap 标签页tab切换js（含报错原因）
booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...
- Bootstrap 标签页（Tab）插件
摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...
- 第二百四十五节，Bootstrap标签页和工具提示插件
Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...
- Easyui 关闭jquery-easui tab标签页前触发事件
关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...
- EasyUI创建异步树形菜单和动态添加标签页tab
创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...
- 标签页tab.js 在栏目之间切换，局部变化
1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...
随机推荐
- 3damx平滑组注意事项
需要在Editable Poly->面级别,选中(需要平滑的)面,然后去点平滑组或自动平滑 如果出现下图的情况,说明可能是有多余点,点没缝合 max中确认,确实是点没缝合导致
- VRTK3.3.0-003发出一条简单射线和监听
1丶在Right下继续添加脚本VRTK_Pointer和VRTK_StraightPointerRenderer 运行后默认是按住圆盘键出现射线,松开消失,大家可以自定义 2丶射线的监听事件 (1)在 ...
- react-native-video的使用
/** * Sample React Native App * https://github.com/facebook/react-native * * @format * @flow */ impo ...
- Educational Codeforces Round 65 (Rated for Div. 2) B. Lost Numbers
链接:https://codeforces.com/contest/1167/problem/B 题意: This is an interactive problem. Remember to flu ...
- HDU-3072-IntelligenceSystem（tarjan，贪心）
链接:https://vjudge.net/problem/HDU-3072 题意: 给你n个点,1个点到另一个点连接花费c,但是如果几个点可以相互可达,则这几个点连通花费为0. 求将整个图连通的最小 ...
- 牛客练习赛41E（球的体积并）
球冠公式是\(\frac{\pi h^2(3R-h)}{3}\),这样再余弦公式用\(R_a\)和\(R_b\)导一导两个球冠的\(h\)就做完了.算是补了个camp时没做出来的小坑了. #inclu ...
- python入门2(补发a)
一.流程控制-while循环,结构如下: while 条件: 结果 如果条件是真,则直接执行结果,然后再次判断条件,直到条件是假,停止循环 那么我们如何终止循环呢? 1,改变循环条件 2,break ...
- Ubuntu上k8s集群里创建证书
证书: k8s里创建证书(使用证书文件命令创建): kubectl create secret tls scdsc-org-cn --cert=/etc/letsencrypt/live/scdsc. ...
- (转)Module ngx_http_fastcgi_module
Example ConfigurationDirectives fastcgi_bind fastcgi_buffer_size fastcgi_buffering f ...
- (转)nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录
nginx利用geo模块做限速白名单以及geo实现全局负载均衡的操作记录 原文:http://www.cnblogs.com/kevingrace/p/6165572.html Nginx的geo模块 ...