检测活动选项卡是否已更改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

Answer 2

我想这就是您要寻找的！

注意我忘记添加该功能来检测上一个选项卡。 所以这是带有先前选项卡检测的版本

 jQuery(function($) { $("#tabs").tabs({ activate: function(event, ui) { var active = $('#tabs').tabs('option', 'active'); $("#tabid").html('the tab id is ' + $("#tabs ul>li a").eq(active).attr("href")); }, beforeActivate: function(event, ui) { var active = $('#tabs').tabs('option', 'active'); $("#prevtabid").html('the prev tab id is ' + $("#tabs ul>li a").eq(active).attr("href")); } }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script> <link rel="stylesheet" type="text/css" media="all" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/base/jquery-ui.css"> <div id="tabs"> <ul> <li><a href="#step1">Step 1</a></li> <li><a href="#step2">Step 2</a></li> <li><a href="#step3">Step 3</a></li> <li><a href="#step4">Step 4</a></li> <li><a href="#step5">Step 5</a></li> <li><a href="#step6">Step 6</a></li> <li><a href="#step7">Step 7</a></li> </ul> <div id="step1"> <p>Content for Step 1</p> </div> <div id="step2"> <p>Content for Step 2</p> </div> <div id="step3"> <p>Content for Step 3</p> </div> <div id="step4"> <p>Content for Step 4</p> </div> <div id="step5"> <p>Content for Step 5</p> </div> <div id="step6"> <p>Content for Step 6</p> </div> <div id="step7"> <p>Content for Step 7</p> </div> </div> <div id="prevtabid"></div> <div id="tabid"></div> 

Answer 3

您可以处理“ shown.bs.tab”事件，并获取类似的ID。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  var currId = $(e.target).attr("id");
})

演示： http ： //www.codeply.com/go/isRcJZloBm