Question

我正在使用twitter bootstrap的标签布局。对于每个选项卡，我都附加了click事件处理程序在单击处理程序中，我想找出所单击的选项卡的索引。以下是代码

<ul class="nav nav-tabs">
    <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a></li>
    <li><a data-toggle="tab" href="#tab2">Tab 2</a></li>
    <li><a data-toggle="tab" href="#tab3">Tab 3</a></li>
</ul>
<div class="tab-content">
    <div id="tab1" class="tab-pane fade in active">
    </div>
    <div id="tab2" class="tab-pane fade">
    </div>
    <div id="tab3" class="tab-pane fade">
    </div>
</div>

的Javascript

  $(".nav.nav-tabs > li > a").on('click', function (e) {

        var index = $(".nav.nav-tabs > li > a").index(this);

        // do something here
    })

只要我在同一页面上有单nav-tabs版布局，上述代码就可以使用但是，如果我在同一页面上有多个nav-tabs，则上述代码可能无法返回正确的索引，或者即使它返回正确的索引，代码也不会优化为仅在单击nav-tabs内部查找。

我可以通过传递id或自定义类名来确定jquery选择的范围。但是，我试图找到是否有通用的方法来查找点击的<a>

索引

Answer 1

使用closest()方法获取包含所点击元素的.nav-tabs，并检查子元素中的索引。

var index = $(this).closest('.nav.nav-tabs').find('> li > a').index(this);

$(".nav.nav-tabs > li > a").on('click', function(e) {
  console.log($(this).closest(".nav.nav-tabs").find('> li > a').index(this));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul><ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul><ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>

或者使用parent()方法获取li可以获得的兄弟姐妹中li元素的索引。

var index = $(this).parent().index();

$(".nav.nav-tabs > li > a").on('click', function(e) {
  console.log($(this).parent().index());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>
<ul class="nav nav-tabs">
  <li class="active"><a data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li><a data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li><a data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>

Answer 2

看这个例子

假设您有以下HTML：

<div class="tabs">
<ul>

    <li><a href="#fragment-2">Tab1</a></li>
    <li><a href="#fragment-3">Tab2</a></li>
    <li><a href="#fragment-4">Tab3</a></li>
</ul>

然后您可以像这样点击标签索引：

$(document).ready(function() {
// Tab initialization
$('.tabs').tabs({
    select: function(event, ui){
        var tabNumber = ui.index;
        var tabName = $(ui.tab).text();

        alert('Tab number ' + tabNumber + ' - ' + tabName + ' - clicked');
    }
});
});

请参阅工作示例here

使用jQuery查找twitter bootstrap选项卡的索引

2 个答案: