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

检测活动选项卡是否更改为jquery

3 个答案: