<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="../css/runoob.css">
<script>
$(function () {
$('a[data-toggle="tab"]').on('show.bs.tab',function (e) {
//获取已激活的标签页的名称
var avtiveTab=$(e.target).text();
//获取前一个激活的标签页的名称
var previousTab =$(e.relatedTarget).text();
$('.active-tab span').html(avtiveTab)
$('.previous-tab span').html(previousTab)
})
})
</script>
</head>
<body>
<hr>
<p class="active-tab">
<strong>激活的标签页</strong>: <span></span>
</p>
<p class="previous-tab">
<strong>前一个激活的标签页</strong>: <span></span>
</p>
<hr>
<ul id="mytab" class="nav nav-tabs">
<li class="active"><a href="#home" data-toggle="tab">主页</a></li>
<li ><a href="#ios" data-toggle="tab">IOS</a></li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" id="myTabDrop1" class="dropdown-toggle">
查看更多
</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="myTabDrop1">
<li><a href="#java" tabindex="-1" data-toggle="tab">JAVA</a></li>
<li><a href="#vb" tabindex="-1" data-toggle="tab">VB</a></li>
</ul>
</li>
</ul>
<div id="myTabContent" class="tab-content">
<div class="tab-pane fade in active" id="home">
<p>tab Home</p>
</div>
<div class="tab-pane fade" id="ios">
<p>IOS tab</p>
</div>
<div class="tab-pane fade" id="java">
<p>java tab</p>
</div>
<div class="tab-pane fade" id="vb">
<p>VB Tab</p>
</div>
</div>
</body>
</html>