Twitter Bootstrap tab shown event not firing on pa

问题:

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-toggle="tab"]').on 'shown', (event) ->
        shown = event.target
        console.log("Showing tab: " + shown)

Now, the 'shown' event does not fire on page load, so for the first tab being shown on the page there's no way to handle this (ie: loading content via xhr)

I tried adding this to the above script, to see if triggering it manually could work:

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

... but it didn't.

This is the HTML code I use in my view

<div class="tabbable">
<ul class="nav nav-tabs">
    <li class="active">
        <a href="#updates" data-toggle="tab"><%=t :updates, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#activity" data-toggle="tab"><%=t :activity, :scope => 'user.profile.sections'%></a>
    </li>
    <li class="">
        <a href="#articles" data-toggle="tab"><%=t :articles, :scope => 'user.profile.sections'%></a>
    </li>
</ul>

<div class="tab-content">
    <div class="tab-pane active" id="updates">

    </div>
    <div class="tab-pane" id="activity">

    </div>

    <div class="tab-pane" id="articles">

    </div>

</div>
</div>

Any clue?

回答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

回答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");

回答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