data-toggle=“tab” , l'activation de la deuxième onglet sur la page de chargement

Je sais que cette question a déjà été posée, je suis passé par les questions précédentes, mais de toute façon rien n'a fonctionné pour moi alors j'ai pensé que je devrais poster cela.

Je tiens à souligner le deuxième onglet sur la page de la charge et quand un bouton est cliqué, je tiens à souligner le premier onglet.

Paramètre de la classe "Volet Onglet Actif" pour la deuxième onglet ne fonctionne pas.

<ul class="nav nav-tabs">
    <li><a href="#search" data-toggle="tab">Search</a></li>
    <li><a href="#home" data-toggle="tab">User Details</a></li>
    <li><a href="#info" data-toggle="tab">More Info</a></li>
</ul>
<div class="tab-content" id="tabs">
    <div class="tab-pane" id="search">...Content...</div>
    <div class="tab-pane active" id="home">...Content...</div>
    <div class="tab-pane" id="info">...Content...</div>
</div>

OriginalL'auteur user2598808 | 2014-05-20

  1. 11

    Vous avez une classe active sur le 2ème onglet volet, montrant qu'au départ, mais pas sur l'onglet li. Donc, vous voyez la deuxième onglets de contenu, mais pas un état sélectionné sur l'onglet. Vous avez besoin de changer:

    <li><a href="#home" data-toggle="tab">User Details</a></li>

    à

    <li class="active"><a href="#home" data-toggle="tab">User Details</a></li>

    Et pour sélectionner des onglets avec jQuery:

    //To select the first tab
$('.nav-tabs li:first-child a').tab('show'); 
//To select the second tab
$('.nav-tabs li:eq(1) a').tab('show');

    Vous pouvez utiliser cette page pour charger si vous le souhaitez (dans $(document).ready() ou ce que vous utilisez), mais il est probablement juste le meilleur pour fixer le balisage. Vous pouvez l'utiliser au sein de votre écouteur d'événement pour votre bouton.

    Voir cet exemple: http://www.bootply.com/kkmcecadLb

    Je Vous Remercie. C'est exactement ce que je voulais. L'exemple que vous avez donné est vraiment utile. Merci encore.

    OriginalL'auteur Josh Davenport