Twitter Bootstrap: Getting the index of an open tab

Question

I'm trying to get the index of a tab when it opens in Twitter Bootstrap (3.3), but it keeps giving me an index of 0. I've checked out this question but a) it's apparently for an older version of Bootstrap (shown instead of shown.bs.tab, etc), and b) I tried to use an updated version of the code(shown.bs.tab) and it didn't work.

Any idea of how to do this in 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

You have to use .parent() to target the parent li instead of $(e.target).index() that get the index of a inside li (that way it's return always 0) :

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

Hope this helps.

---

$('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

I think you're trying to get the index of some element relative to a set of elements. Try this instead:

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

Answer 3

You can find the parent li of the the current a by using .closest() and find its index.

 $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
      alert($(this).closest('li').index());
    })

Working example : http://jsfiddle.net/eazg9hoe/1/

Answer 4

$(e.target).index() will get the index of the element in relation of the parent. Since you are firing from the <a> and the parent is the <li> the index will always be 0.

If you jump up to the parent(<li>) and find the index of that since you will be checking the index of the <li> in relation to the <ul> you will get the correct index.

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

If you did want to find out the index of the tab in relation to all of the $('a[data-toggle="tab"]') items. You could also use $.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);
});

Examples here:

http://jsfiddle.net/zdd96tc6/