Bootstrap标签页（Tab）插件事件
事件
下表列出了标签页（Tab）插件中要⽤到的事件。这些事件可在函数中当钩⼦使⽤。
事件描述实例
show.bs.tab 该事件在标签页显⽰时触发，但是必须在新标签页被显⽰之前。分别使
⽤ event.target 和latedTarget 来定位到激活的标签页和前⼀个激活的标
签页。
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
e.target // 激活的标签页
})
shown.bs.tab 该事件在标签页显⽰时触发，但是必须在某个标签页已经显⽰之后。分别使
⽤ event.target 和latedTarget 来定位到激活的标签页和前⼀个激活的标
签页。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
e.target // 激活的标签页
})
实例：
<!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 >
<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>
angular和angularjs
<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>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。