newbie
newbie

Reputation: 1980

Get Current Active Tab through JS.

I want to display the current tab as active in BOOTSTRAP.

<ul class="nav nav-tabs">               
    <!-- Default tab -->
    <li class="active"><a href="#elemLower_tab" data-toggle="tab">Elementary Lower</a></li>
    <li><a href="#elemAdvance_tab" data-toggle="tab">Elementary Advance</a></li>
    <li><a href="#secondary_tab" data-toggle="tab">Secondary</a></li>               
</ul>

I want to get the current tab active through jQuery? Is there a way to do this?

Upvotes: 16

Views: 54652

Answers (3)

Nicky McCurdy
Nicky McCurdy

Reputation: 19554

If you want to run JavaScript code whenever the current tab changes, see show and shown events in the tabs plugin documentation.

Upvotes: 0

Dhanith Suryavansi
Dhanith Suryavansi

Reputation: 29

Use this JS Code.

$(function(){
var url = window.location.pathname,
urlRegExp = new RegExp(url.replace(/\/$/,'') + "$");
$('ul.nav-tabs li a').each(function(){
if(urlRegExp.test(this.href.replace(/\/$/,''))){
$(this).addClass('active');
}
});
});

Use CSS:Attach Active class to

ul.nav-tabs a.active{color:#000;}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Try

$('.nav-tabs .active').text()

Upvotes: 44

Related Questions