Bootstrap切换tab事件

<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;
});

$('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("新选项卡显示之后");
   })