Bootstrap tab activation with JQuery

Question

I have the following code:

<ul class="nav nav-tabs">     <li><a href="#aaa" data-toggle="tab">AAA</a></li>     <li><a href="#bbb" data-toggle="tab">BBB</a></li>     <li><a href="#ccc" data-toggle="tab">CCC</a></li> </ul> <div class="tab-content" id="tabs">     <div class="tab-pane" id="aaa">...Content...</div>     <div class="tab-pane" id="bbb">...Content...</div>     <div class="tab-pane" id="ccc">...Content...</div> </div> 

And the following script:

$(document).ready(function(){     activaTab('aaa'); });  function activaTab(tab){     $('.tab-pane a[href="#' + tab + '"]').tab('show'); }; 

In this case when the page is ready, the second tab will be activated but I always get a JavaScript error in the line $('.tab-pane a[href="#' + tab + '"]').tab();

Can anyone help me, please?

Answer 1

Applying a selector from the .nav-tabs seems to be working: See this demo.

$(document).ready(function(){     activaTab('aaa'); });  function activaTab(tab){     $('.nav-tabs a[href="#' + tab + '"]').tab('show'); }; 

I would prefer @codedme's answer, since if you know which tab you want prior to page load, you should probably change the page html and not use JS for this particular task.

I tweaked the demo for his answer, as well.

(If this is not working for you, please specify your setting - browser, environment, etc.)

Answer 2

Perform a click on the link to the tab anchor whenever the page is ready i.e.

$('a[href="' + window.location.hash + '"]').trigger('click'); 

Or in vanilla JavaScript

document.querySelector('a[href="' + window.location.hash + '"]').click();