How Can I get the clicked or active number of tab?

Question

HTML

<div class="tabbable tabs-left">
    <ul class="nav nav-tabs">
        <li><a href="#menu23" data-toggle="tab">Beethoven</a></li>
        <li><a href="#menu24" data-toggle="tab">Bach</a></li>
    </ul>

    <div class="tab-content">
        <div class="tab-pane" id="menu23">
            item1
        </div>
        <div class="tab-pane" id="menu24">
            item2
        </div>
    </div>

I want to get the tab index number not tab name.

Such as:

if Beethoven is clicked, I need 0;
if Bach is clicked, I need 1;

I made this code from this document

$('#myTab a').click(function (e) {
      e.preventDefault();
     // How do I get tab number....??
});

score 5 · Accepted Answer · edited Aug 02 '13 at 19:45

5

Try this:

$('.nav-tabs a').click(function (e) {
     e.preventDefault();
     alert($($(this).attr('href')).index());
});

Or with bootstrap's events

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

edited Aug 02 '13 at 19:45

KyleMit

30,350
66
462
664

answered Aug 02 '13 at 18:14

omma2289

54,161
8
64
68

you need to use: $(document).on('shown.bs.tab', ....) - https://stackoverflow.com/questions/23211543/tab-shown-event-not-firing-twitter-bootstrap – Edd Jul 31 '18 at 16:10

score 0 · Answer 2 · answered Sep 05 '19 at 23:02

0

If you want to do it without a click event you can use this:

var tabIdx = $('.dashboardTab.active').data("tabidx");
console.log(tabIdx);

answered Sep 05 '19 at 23:02

Rocco

187
1
4

score -1 · Answer 3 · answered Feb 21 '18 at 12:18

-1

We have direct API for this.

currentIndex

Returns the zero based index number for the current tab.
for more- https://github.com/VinceG/twitter-bootstrap-wizard

answered Feb 21 '18 at 12:18

S.Yadav

4,273
3
37
44

this answer is in no way helpful – MattOpen May 07 '18 at 14:27

How Can I get the clicked or active number of tab?

3 Answers3

Linked