Question

我试图在Twitter Bootstrap（3.3）中打开选项卡的索引，但它一直给我一个0的索引。我已经检查了this question但a)显然是因为较旧版本的Bootstrap（shown而不是shown.bs.tab等），b) 1}}我尝试使用代码的更新版本（shown.bs.tab），但它没有用。

如何在Bootstrap 3.3中做到这一点？

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log($(e.target).index());
});

I've created a JSFiddle here.

Answer 1

您必须使用.parent()定位父li而不是$(e.target).index()来获取a内的li索引（这样它总是会返回0）：

$(e.target).parent().index()

希望这有帮助。

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    console.log($(e.target).parent().index());
})

body {
    margin: 5px;
    background: #A6A6A6
}

/* Tab Navigation */
.nav-tabs {
    margin: 0;
    padding: 0;
    border: 0;    
}
.nav-tabs > li > a {
    background: #DADADA;
    border-radius: 0;
    box-shadow: inset 0 -8px 7px -9px rgba(0,0,0,.4),-2px -2px 5px -2px rgba(0,0,0,.4);
}
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover {
    background: #F5F5F5;
    box-shadow: inset 0 0 0 0 rgba(0,0,0,.4),-2px -3px 5px -2px rgba(0,0,0,.4);
}

/* Tab Content */
.tab-pane {
    background: #F5F5F5;
    box-shadow: 0 0 4px rgba(0,0,0,.4);
    border-radius: 0;
    text-align: center;
    padding: 10px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"/>
<div class="container">
    
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist">
      <li class="active">
          <a href="#home" role="tab" data-toggle="tab">
              <icon class="fa fa-home"></icon> Home
          </a>
      </li>
      <li><a href="#profile" role="tab" data-toggle="tab">
          <i class="fa fa-user"></i> Profile
          </a>
      </li>
      <li>
          <a href="#messages" role="tab" data-toggle="tab">
              <i class="fa fa-envelope"></i> Messages
          </a>
      </li>
      <li>
          <a href="#settings" role="tab" data-toggle="tab">
              <i class="fa fa-cog"></i> Settings
          </a>
      </li>
    </ul>
    
    <!-- Tab panes -->
    <div class="tab-content">
      <div class="tab-pane fade active in" id="home">
          <h2>Home Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/1" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="profile">
          <h2>Profile Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/2" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="messages">
          <h2>Messages Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/3" alt="Cats"/>
      </div>
      <div class="tab-pane fade" id="settings">
          <h2>Settings Content Goes Here</h2>
          <img src="http://lorempixel.com/400/400/cats/4" alt="Cats"/>
      </div>
    </div>
    
</div>







<!-- Post Info -->
<div style='position:fixed;bottom:0;left:0;    
            background:lightgray;width:100%;'>
    About this SO Question: <a href='http://stackoverflow.com/q/24553105/1366033'>How to create Tabbed Panel in Bootstrap</a><br/>
    Fork This Skeleton Here: <a href='http://jsfiddle.net/KyleMit/kcpma/'>Bootstrap 3.0 Skeleton</a><br/>
    Styled after this (better) template: <a href='http://wrapbootstrap.com/preview/WB066F8J6'>Responsive Tabbed Form</a><br/>                
<div>

Answer 2

我认为你试图获得一些元素相对于一组元素的索引。试试这个：

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  console.log($('a[data-toggle="tab"]').index($(e.target)))
});

Answer 3

您可以使用Active找到当前a的父li并找到其.closest()。

index

工作示例： http://jsfiddle.net/eazg9hoe/1/

Answer 4

$(e.target).index()将获取父元素相关元素的索引。由于您从<a>开始，而父项是<li>，因此索引将始终为0.

如果您跳到父（<li>）并查找其索引，因为您将检查与<li>相关的<ul>的索引，您将获得正确的指数。

console.log($(e.target).parent().index());

如果您确实想要找出与所有$('a[data-toggle="tab"]')项相关的选项卡索引。您也可以使用$.inArray(object,array)

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    var index = $.inArray(e.target,$('a[data-toggle="tab"]'))
    console.log(index);
});

此处的示例：

http://jsfiddle.net/zdd96tc6/

Twitter Bootstrap：获取打开选项卡的索引

4 个答案: