1つのナビタブで複数のタブコンテンツを制御

Question

私は通常のTwitter Bootstrap 3タブを持っています。私がしたいことは、複数の
tab-contentコンテナを1つのnav-tabs要素で制御することです。私はタブを変更した場合、最初のものだけが変更され、この例ではjsfiddle

：ここ

は一例です。最初のものだけでなく、両方のコンテナを変更したい。

ありがとうございます！

Answer 1

ここで私はあなたのjsfiddle

を更新し、私は、

をこの行を変更し、要素にデータ・ターゲット属性を追加し、2つ目のタブ・コンテンツ

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

そして、2つ目のタブ・コンテンツ、ユアーズ：

<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は一意である必要があります。

2つの要素のid家、プロファイルとmyTabContentであなたのコードで

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

問題。

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

と あなたはid.Notとidを持つすべての要素を、最初の要素を対象とします href="#home"を与えています。

<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

あなただけの代わりにクラスを使用する必要があります。私はちょうどモーダルウィンドウ内のブートストラップ3のタブ付きコンテンツに取り組んでいました。モーダルウィンドウを正しいタブに開くようにしようとしていましたが、私は2つのタブを開く必要がありました.1つはモーダルヘッダ用で、もう1つはコンテンツ用です。

私はクラスを使用していました。だから、<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">に変更してくれました。