Twitter Bootstrap Question posted in

Find the index of twitter bootstrap's tab using jQuery

I am using twitter bootstrap’s tab layout. For each tab i have attached click event handler. Inside the click handler i wanted to find out the index of the tab that is clicked. Below is by code

<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
    })

The above code works as long as i have single nav-tabs layout on the same page.
But if i have multiple nav-tabs on the same page the above code may not return correct index or even if it returns correct index the code is not optimized to look only inside clicked nav-tabs.

I can scope the jquery select by passing id or custom class name. However i’m trying to find if there is generic way to find the index of clicked <a>

Tags:

2

Answers


  1. 0

    Get the .nav-tabs which contains the clicked element using closest() method and check index within the children element.

    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>

    Or get the index of li element within the siblings where li can get using parent() method.

    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>
    Login or Signup to reply.
  2. 0

    see this exmaple

    lets say you have the following 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>

    then you can get clicked tab index like this:

    $(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');
    }
});
});

    please see working example here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search