wake-up-neo.com

Steuern Sie mehrere Tab-Inhalte mit einer Navigationsleiste

Ich habe eine normale Twitter Bootstrap 3 Registerkarte. Was ich tun möchte, ist zu kontrollieren, mehrere zu kontrollieren
tab-content Container mit einem nav-tabs Element.

Hier ist ein Beispiel: jsfiddle

Wenn ich in diesem Beispiel die Registerkarten wechsle, wird nur die erste geändert. Ich möchte, dass sich beide Container ändern, nicht nur der erste.

Vielen Dank!

18
intelis

Hier aktualisiere ich Ihre jsfiddle

Ich füge den Attributen data-target zu a-elements hinzu und ändere die IDs im zweiten Tab-Inhalt

Ich habe diese Zeilen geändert,

Deine:

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

Mein Update: 

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

Und der zweite Tab-Inhalt, Ihre:

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

Mein Update:

<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

Sie sollten stattdessen einfach eine Klasse verwenden. Ich habe gerade an Bootstrap 3-Registerkarteninhalten in einem modalen Fenster gearbeitet. Ich habe versucht, das modale Fenster mit der richtigen Registerkarte zu öffnen, aber ich brauchte zwei Registerkarten, eine für die modale Kopfzeile und eine für den Inhalt, mit zusätzlichen Registerkarten in der Fußzeile.

Ich habe eine Klasse benutzt und es hat funktioniert. Ändern Sie also <div class="tab-pane fade in active" id="home"> in <div class="tab-pane fade in active home"> und <a href="#home" data-toggle="tab"> in <a href=".home" data-toggle="tab"> ... für mich gearbeitet.

ID muss eindeutig sein.

Lesen Sie Zwei HTML-Elemente mit demselben id-Attribut: Wie schlimm ist es wirklich?

problem mit Ihrem Code

Zwei Elemente mit id home, profile und 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>

und Sie geben href="#home", der das erste Element mit id anvisiert. Nicht alle Elemente mit 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