Twitter Bootstrap nav nav-tabs ne changent pas sur le clic

J'aime la façon dont le nav-tabs regarde si je veux l'utiliser. C'est la façon dont l'application web regarde en ce moment:

Twitter Bootstrap nav nav-tabs ne changent pas sur le clic

Malheureusement, si je clique sur l'onglet autre (par exemple "Buscar l'établissement alojamiento"), l'onglet actif ne change pas. C'est mon code:

<ul class="nav nav-tabs">

    <li>        
        <g:link controller="usuario" action="show">         
            <g:message code="nav.usuario.show" default="Datos del usuario" />           
        </g:link>       
    </li>   

    <li class="active">
        <a href="${createLink(uri: '/')}">
            <g:message code="nav.home" default="Página de inicio" />
        </a>
    </li>

    <li>        
        <g:link controller="alojamiento" action="show">         
            <g:message code="nav.alojamiento.show" default="Buscar alojamiento" />          
        </g:link>       
    </li>   

</ul>

J'ai également essayer d'enlever class="active". Pas d'onglet est actif jamais fait cela.

Où est votre javascript?
Cela n'a absolument rien à voir avec le Graal.
<g:link... est Graal @JamesKleeh`
Il n'y a pas de Javascript ici @AntarrByrd
Est toute réponse utile et approprié pour être accepté?

OriginalL'auteur chelder | 2013-08-15

  1. 11

    Cocher la case "Tabbable Nav" par exemple dans le Twitter Bootstrap Composants. Vous devez avoir le bon code html pour ce travail. Exemple:

    <ul class="nav nav-tabs">
  <li class="active">
    <a href="#home" data-toggle="tab">Home</a>
  </li>
  <li><a href="#other" data-toggle="tab">Other</a></li>
  <li><a href="#">...</a></li>
</ul>
 <div class="tab-content">
   <div id="home" class="tab-pane active">
     <p>Home</p>
   </div>
   <div id="other" class="tab-pane">
     <p>Other</p>
   </div>
</div>

    Voir le class appliquée et de la href des liens.

    Mise à JOUR

    Comme nous l'avons évoqué dans les commentaires, on peut aussi changer avec le Javascript:

    <script type="text/javascript">
    ...
    document.getElementById("home").setAttribute("class","active")

    Ou JQuery:

    $('#home').attr('class','active')
    Vous l'a dit. Nous sommes pulpiteers de même de l'évangile. Cette fois, vous avez une réponse détaillée. 😉
    Je suis en train d'utiliser nav nav-tabs à agir comme navbar-inner. Je veux dire, si on clique sur un lien normal, il ne va pas montrer une tab-pane. Il va passer à la lien cliqué. Comment pourrais-je changer le look de la navbar-inner à regarder comme le nav nav-tabs?
    vous voulez aller à ce lien, ou tout simplement afficher le contenu de ce lien dans l'onglet?
    Poignée class="active", selon la page en cours...
    Vous pouvez également utiliser JQuery -> $('#tab1Id').attr('class','active')

    OriginalL'auteur Sérgio Michels

  2. 3

    Vous devez Tabbable Nav pour basculer entre le contenu de chaque onglet.

    J'ai mis mon code entre <div class="tabbable">. Rien n'a changé.
    Suivez l'exemple illustré dans le bootstrap page ou suivez ce que Sergio a déclaré, à la fois pour dire la même chose. @chelder

    OriginalL'auteur dmahapatro