使用一個導航標籤控制多個標籤頁內容

Question

我有一個常規的Twitter Bootstrap 3標籤。我想要做的是控制多個
tab-content容器與一個nav-tabs元素。

下面是一個例子：jsfiddle

在這個例子中，當我改變標籤，僅第一個被改變。我希望兩個容器都能改變，而不僅僅是第一個。

謝謝！

Answer 1

在這裏，我更新jsfiddle

我的數據目標屬性添加到一個元素和改變ID在第二個選項卡內容

我修改這個線，

您的：

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

我的更新：

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

而第二個選項卡的內容，你的：

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

我的更新：

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

Answer 2

ID必須是唯一的。

讀 Two HTML elements with same id attribute: How bad is it really?

問題，你的代碼標識家，分佈和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> 

和 你給href="#home"將針對第一個元素id.Not與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> 

Answer 3

你應該只使用一個類來代替。我只是在模態窗口內工作Bootstrap 3標籤內容。試圖讓模式窗口打開到正確的選項卡，但我需要打開兩個選項卡，一個用於模態標題，另一個用於內容，在頁腳中帶有額外的nab選項卡。

我使用了一個類，它工作。所以，將<div class="tab-pane fade in active" id="home">更改爲<div class="tab-pane fade in active home">和<a href="#home" data-toggle="tab">至<a href=".home" data-toggle="tab"> ...爲我工作。