事件

下表列出了标签页（Tab）插件中要用到的事件。这些事件可在函数中当钩子使用。

事件 描述 实例
show.bs.tab 该事件在标签页显示时触发，但是必须在新标签页被显示之前。分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {

  e.target // 激活的标签页

  e.relatedTarget // 前一个激活的标签页

})
shown.bs.tab 该事件在标签页显示时触发，但是必须在某个标签页已经显示之后。分别使用 event.target 和event.relatedTarget 来定位到激活的标签页和前一个激活的标签页。 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

  e.target // 激活的标签页

  e.relatedTarget // 前一个激活的标签页

})

实例：

<!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)插件事件的更多相关文章

  1. Bootstrap标签页(Tab)插件

    标签页(Tab)在Bootstrap导航元素一章中简介过,通过结合一些data属性,您可以轻松地创建一些标签页界面.通过这个插件您可以把内容放置在标签页或胶囊式标签页甚至是下拉菜单标签页中. 用法 您 ...

  2. 解决Bootstrap 标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  3. 解决Bootstrap标签页(Tab)插件切换echarts不显示问题

    1.参考连接:https://blog.csdn.net/qq_24313955/article/details/78363981 问题描述:在echarts跟bootstrap选项卡整合的时候,默认 ...

  4. bootstrap 标签页tab切换js（含报错原因）

    booststrap 标签页的tab切换,相信大家已经都很熟悉了,在boot官网示例以及其他网站已经很多罗列相关代码的了,这里就不赘述了.这里主要贴下让boot标签页默认显示哪个标签页的js. 主要留 ...

  5. Bootstrap 标签页（Tab）插件

    摘自: http://www.runoob.com/bootstrap/bootstrap-tab-plugin.html Bootstrap 标签页(Tab)插件 标签页(Tab)在 Bootstr ...

  6. 第二百四十五节，Bootstrap标签页和工具提示插件

    Bootstrap标签页和工具提示插件 学习要点: 1.标签页 2.工具提示 本节课我们主要学习一下 Bootstrap 中的标签页和工具提示插件. 一．标签页选项卡 标签页也就是通常所说的选项卡功能 ...

  7. Easyui 关闭jquery-easui tab标签页前触发事件

    关闭jquery-easui tab标签页前触发事件 by:授客 QQ:1033553122 测试环境 jquery-easyui-1.5.3 需求场景 点击父页面tab 页关闭按钮时,需要做判断,判 ...

  8. EasyUI创建异步树形菜单和动态添加标签页tab

    创建异步树形菜单 创建树形菜单的ul标签 <ul class="easyui-tree" id="treeMenu"> </ul> 写j ...

  9. 标签页tab.js 在栏目之间切换，局部变化

    1.在使用bootstrap 中,我们会用到在栏目之间切换,来刷新页面的局部,可以使用下面的方法 <link rel="stylesheet" href="http ...

随机推荐

  1. 【转】生产环境：Nginx高可用方案

    准备工作: 192.168.16.128 192.168.16.129 两条虚拟机.安装好 Nginx 安装Nginx 更新 yum 源文件: rpm -ivh http://nginx.org/pa ...

  2. [Xcode 实际操作]六、媒体与动画-(4)使用CoreImage框架更改图片的色相

    目录:[Swift]Xcode实际操作 本文将演示如何使用CoreImage框架,调整图片的色相. 通过调整图像的色相,使图像产生暖色效果. 在项目导航区,打开视图控制器的代码文件[ViewContr ...

  3. 解决webSocke客户端连接服务端返回400错误

    原因: nginx使用了转发,头信息没设置全,问题出现在nginx的配置文件 解决办法: 修改nginx.conf配置文件,在linux终端敲入vim /etc/nginx/nginx.conf,找到 ...

  4. 剑指Offer的学习笔记（C#篇）-- 连续子数组的最大和

    题目描述 HZ偶尔会拿些专业问题来忽悠那些非计算机专业的同学.今天测试组开完会后,他又发话了:在古老的一维模式识别中,常常需要计算连续子向量的最大和,当向量全为正数的时候,问题很好解决.但是,如果向量 ...

  5. 【考试记录】Educational Codeforces Round 59 (Rated for Div. 2)

    本来准备划水,结果被垃圾题艹翻了…… T2题意: 定义一个数$x$的数字根$S(x)$为:将其各位数字相加得到一个新数,再将新数的数字和相加直到得到一个个位数,就是该数的数字根. 例如:$S(38)= ...

  6. python大战机器学习——数据降维

    注:因为公式敲起来太麻烦,因此本文中的公式没有呈现出来,想要知道具体的计算公式,请参考原书中内容 降维就是指采用某种映射方法,将原高维空间中的数据点映射到低维度的空间中 1.主成分分析(PCA) 将n ...

  7. spark-2.2.0-bin-hadoop2.6和spark-1.6.1-bin-hadoop2.6发行包自带案例全面详解（java、python、r和scala）之Basic包下的JavaPageRank.java（图文详解）

    不多说,直接上干货! spark-1.6.1-bin-hadoop2.6里Basic包下的JavaPageRank.java /* * Licensed to the Apache Software ...

  8. Selenium~自动化测试来了

    这段时候研究了一下Selenium,它是一个自动化测试工具,在asp.net平台可以通过nuget去安装,同时支持多种开发语言,之前支持java,而现在也支持C#了,所以我们通过nuget就可以安装了 ...

  9. ES5数组遍历

    reduce() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值. array.reduce(function(total, currentValue, curren ...

  10. JavaScript笔记5-事件

    一.概述: 事件是可以被JavaScript侦测到的行为.网页中的每个元素都可以产生某些可以触发JavaScript函数的事件.相当于让标签在满足某种条件的时候,调用指定的方法. 二.常用事件 1:o ...