I am using a bootstrap tabpanel like this:

<div class="row spiff_tabs_body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.

Updated:

I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.

I need to do something like this:

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});

var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
    alert("instantspiff");
}
else {
    alert("delayedspiff");
}
</script>

I am using a bootstrap tabpanel like this:

<div class="row spiff_tabs_body">
            <!-- Nav tabs -->
            <ul class="nav nav-tabs spiff_tabs" role="tablist">
                <li role="presentation" class="active">
                    <a href="#home" aria-controls="home" role="tab" data-toggle="tab" onclick="FormGet('dashboard/delayedspiff', 'delayedspiff')">Potential Spiff</a>
                </li>
                <li role="presentation">
                    <a href="#profile" aria-controls="profile" role="tab" data-toggle="tab" onclick="FormGet('dashboard/instantspiff', 'delayedspiff')">Instant Spiff</a>
                </li>
            </ul>
            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="delayedspiff"></div>
                <div role="tabpanel" class="tab-pane" id="instantspiff"></div>
            </div>
        </div>
    </div>
</div>

Using javascript I need to figure out which tab the user is on. I'm not really sure how to do this. I've read a lot about selecting the active tab, but I can't really find out how to check which tab the user has selected.

Updated:

I forgot to mention I need to be able to check in a conditional if statement which tab is selected and then do something based on which tab is active.

I need to do something like this:

<script>
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});

var id = $('.tab-content .active').attr('id');
if (id == "instantspiff") {
    alert("instantspiff");
}
else {
    alert("delayedspiff");
}
</script>

• javascript
• twitter-bootstrap

• 1 you can get the id of the active tab $('.tab-content .active').attr('id'); if you are using jquery – Sherif Ahmed Commented Nov 16, 2015 at 19:54
• @SherifAhmed See my update in my question. I somehow need to use the tab id in a if statement. Do you know how I can do this? – hollyquinn Commented Nov 16, 2015 at 20:33

1 Answer 1

check this

var id = $('.tab-content .active').attr('id');
if(id == "delayedspiff") {
    alert("delayedspiff");
}
else {
    alert("instantspiff");
}

when they click on a tab add this

$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
    // here is the new selected tab id
    var selectedTabId = e.target.id;
});