Twitter onglet Bootstrap montré événement ne pas tirer sur le chargement de la page

Dans une page où j'ai n onglets, et le script suivant (coffeescript, j'ai vérifié à la compilation javascript et il semble être ok)...

$ ->
    init()

init = ->
    $('a[data-toggle="tab"]').on 'shown', (event) ->
        shown = event.target
        console.log("Showing tab: " + shown)

Maintenant, 'montré' événement ne se déclenche pas au chargement de la page, donc pour le premier onglet sur la page il n'y a aucune façon de gérer cela (c'est à dire: le chargement de contenu via xhr)

J'ai essayé d'ajouter à cela le script ci-dessus, pour voir si la déclencher manuellement pourrait fonctionner:

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

... mais il n'a pas.

C'est le code HTML que j'utilise dans mon point de vue

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

La moindre idée?

source d'informationauteur sixpounder

28

Essayez de laisser la classe active à la fois l'onglet <li> et le contenu <div>. L'un des premiers les lignes de code dans le show() méthode est de court-circuit si l'onglet demandée est déjà active.

JSFiddle
12

Vous pouvez déclencher l'événement manuellement lorsque vous dites à la page pour afficher l'onglet:
```
$('a[data-toggle="tab"]:first').trigger("shown.bs.tab");
```
0

Je pense que vous êtes le mélange de Bootstrap, Javascript Toggable les onglets et les onglets de Base géré par les classes et les id

Dans le cas où vous souhaitez utiliser Javascript pour gérer les onglets, vous devez supprimer le data-toggle="tab" de l'ancre sur le LI éléments comme indiqué ici: http://getbootstrap.com/2.3.2/javascript.html#tabs

Vous pouvez comparer la syntaxe avec les bases onglets: http://getbootstrap.com/2.3.2/components.html#navs

Vous devez vous connecter pour publier un commentaire.

JSFiddle