Twitter Bootstrap Tab Shown Event Not Firing On Page Load

In a page where I have n tabs, and the following script (coffeescript, I checked the compiled javascript and it seems to be ok)... $ -> init() init = -> $('a[data-to

Solution 1:

Try leaving the class active off both the tab <li> and the content <div>. One of the first lines of code in the show() method is to short-circuit if the tab being requested is already active.

JSFiddle

Solution 2:

You can trigger the event manually when you tell the page to show the tab:

$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");

Solution 3:

I think you are mixing Bootstrap Javascript Toggable tabs and Basic tabs managed by classes and id's

In case you want to use Javascript to manage the tabs you should delete the data-toggle="tab" from the anchors on the LI elements as shown here: http://getbootstrap.com/2.3.2/javascript.html#tabs

You can compare the syntax with basics tabs: http://getbootstrap.com/2.3.2/components.html#navs

Solution 4:

After my

$("#modal").modal('show');

I added this and it worked just fine:

$('a[data-toggle="tab"]:first').click();