当标签在 Twitter Bootstrap (3.3) 中打开时，我试图获取它的索引，但它一直给我一个 0 的索引。我已经检查了this question 但a) 它显然是针对旧版本的 Bootstrap（shown 而不是shown.bs.tab 等）和b) 我尝试使用更新版本的代码（@987654328 @) 但它没有用。
知道如何在 Bootstrap 3.3 中执行此操作吗？
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log($(e.target).index());
});
【问题讨论】：
标签： javascript jquery html twitter-bootstrap
您必须使用.parent() 来定位父li 而不是$(e.target).index()，后者在li 中获取a 的索引（这样它总是返回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>【讨论】：
我认为您正在尝试获取某个元素相对于一组元素的索引。试试这个：
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
console.log($('a[data-toggle="tab"]').index($(e.target)))
});
【讨论】：
您可以使用.closest()找到当前a的父li并找到它的index。
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
alert($(this).closest('li').index());
})
【讨论】：
$(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);
});
此处的示例：
【讨论】：