博客

<ul id="myTab" class="nav nav-tabs">
	<li class="active"><a href="#tab1" data-toggle="tab">标题1</a></li>
	<li><a href="#tab2" data-toggle="tab">标题2</a></li>
</ul>
<div id="myTabContent" class="tab-content">
	<div class="tab-pane fade in active" id="tab1">内容1</div>
   <div class="tab-pane fade in active" id="tab2">内容2</div>
</div>

$('#myTab a').click(function (e) {
	e.preventDefault();
	$(this).tab('show');
	var activeTab = (e.target).text;
});

当显示一个新标签时，事件触发顺序：

1. hide.bs.tab (老选项卡隐藏之前)
2. show.bs.tab (新选项卡显示之前)
3. hidden.bs.tab(老选项卡隐藏之后)
4. shown.bs.tab(新选项卡显示以后)

如果没有标签页已经激活，那么隐藏。bs。taba

$('a[data-toggle="tab"]').on('hide.bs.tab', function (e) {
     // e.target // 新选项卡对象
     // e.relatedTarget // 老选项卡对象
     console.log("老选项卡隐藏之前");
   })
   $('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
     // e.target // 新选项卡对象
     // e.relatedTarget // 老选项卡对象
     console.log("新选项卡显示之前");
   })
   $('a[data-toggle="tab"]').on('hidden.bs.tab', function (e) {
     // e.target // 新选项卡对象
     // e.relatedTarget // 老选项卡对象
     console.log("老选项卡隐藏之后");
   })
   $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
     console.log(e.target.nodeName);//获取事件触发元素标签名（li，p，div，img，button…）
     console.log(e.target.id);//获取事件触发元素id
     console.log(e.target.className);//获取事件触发元素classname
     console.log(e.target.innerHTML);//获取事件触发元素的内容（li）
     console.log(e.relatedTarget) // 老选项卡对象
     console.log("新选项卡显示之后");
   })

初始化时不会执行上面的事件