javascript - jquery 检测事件选项卡是否更改

Question

我有这个标签。有没有办法检测事件选项卡何时更改？

<div class="navbar">
   <div class="navbar-inner">
      <ul class="nav nav-tabs" style="display:inline-flex">
          <li class="active"><a href="#step1" data-toggle="tab" id="step1">Step 1</a></li>
          <li><a href="#step2" data-toggle="tab" id="step2">Step 2</a></li>
          <li><a href="#step3" data-toggle="tab" id="step3">Step 3</a></li>
          <li><a href="#step4" data-toggle="tab" id="step4">Step 4</a></li>
          <li><a href="#step5" data-toggle="tab" id="step5">Step 5</a></li>
          <li><a href="#step6" data-toggle="tab" id="step6">Step 6</a></li>
          <li><a href="#step7" data-toggle="tab" id="step7">Step 7</a></li>
         </ul>
      </div>
  </div>

我想获取前一个事件选项卡的 id，并获取新的事件选项卡。这可能吗？

Answer 1

以下是如何使用 Bootstrap 执行此操作:

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {

   e.relatedTarget // previous active tab
   e.target // newly activated tab

   console.log("id of previous active tab: " + e.relatedTarget.id);
   console.log("id of newly activated tab: " + e.target.id);

});

完整文档在这里:http://getbootstrap.com/javascript/#tabs-events