Get current active tab via JS.

Question

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 activate the current tab through jQuery? Is there any way to do this?

Answer 1

Try

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

Answer 2

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 an active class to

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

Answer 3

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