Reputation: 1980
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
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
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