web-dev-qa-db-fra.com

Contrôlez le contenu de plusieurs onglets avec un seul onglet de navigation

J'ai un onglet Twitter Bootstrap 3 normal. Ce que je veux faire est de contrôler est de contrôler plusieurs
tab-content conteneur avec un élément nav-tabs.

Voici un exemple: jsfiddle

Dans cet exemple, lorsque je change d'onglet, seul le premier est modifié. Je veux que les deux conteneurs changent, pas seulement le premier.

Merci!

javascriptjqueryhtmlcsstwitter-bootstrap
18
intelis

Ici, je mets à jour votre jsfiddle

J'ajoute l'attribut data-target à a-elements et modifie les identifiants dans le deuxième contenu de tabulation

J'ai modifié ces lignes,

Le tiens:

<li class="active"><a href="#home" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-toggle="tab">C2</a>  </li>

Ma mise à jour: 

<li class="active"><a href="#home" data-target="#home, #home_else" data-toggle="tab">C1</a></li>
<li><a href="#profile" data-target="#profile, #profile_else" data-toggle="tab">C2</a>  </li>

Et le deuxième onglet contenu, le vôtre:

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

Ma mise à jour:

<div id="myTabContent2" class="tab-content">
    <div class="tab-pane fade in active" id="home_else">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile_else">
        <p>Content 2.</p>
    </div>
</div>
40
artgladun

Vous devriez simplement utiliser une classe à la place. Je travaillais juste sur Bootstrap 3 contenu tabulé à l'intérieur d'une fenêtre modale. J'essayais de faire en sorte que la fenêtre modale s'ouvre sur le bon onglet, mais j'avais besoin de deux onglets à ouvrir, un pour l'en-tête modal et un pour le contenu, avec des onglets supplémentaires dans le pied de page.

J'ai utilisé une classe et cela a fonctionné. Ainsi, changer <div class="tab-pane fade in active" id="home"> en <div class="tab-pane fade in active home"> et <a href="#home" data-toggle="tab"> en <a href=".home" data-toggle="tab"> ... a fonctionné pour moi.

14
OMNIA Design and Marketing

L'identifiant doit être unique.

Lire Deux éléments HTML avec le même attribut id: Quelle est leur gravité?

problème avec votre code

Deux éléments avec id home, profile et myTabContent.

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

<hr>

<div id="myTabContent" class="tab-content">
    <div class="tab-pane fade in active" id="home">
        <p>Content 1.</p>
    </div>
    <div class="tab-pane fade" id="profile">
        <p>Content 2.</p>
    </div>
</div>

etvous donnez href="#home" qui ciblera le premier élément avec id.Not tous les éléments avec id.

<ul id="myTab" class="nav nav-tabs">
    <li class="active"><a href="#home" data-toggle="tab">C1</a></li>
    <li><a href="#profile" data-toggle="tab">C2</a></li>
</ul>
0
Tushar Gupta