javascript - 1 つのナビゲーション タブで複数のタブ コンテンツを制御する

Question

通常のTwitter Bootstrap 3タブがあります。私がやりたいことは、1つの要素で複数の
tab-contentコンテナを制御することです。nav-tabs

以下に例を示します。

この例では、タブを変更すると、最初の 1 つだけが変更されます。最初のコンテナだけでなく、両方のコンテナを変更したい。

ありがとう！

Answer 1

ID は一意である必要があります。

同じ id 属性を持つ 2 つの HTML 要素を読む : 本当に悪いのか?

コードの問題

ID が home 、 profile 、および myTabContent の 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>

<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を持つ最初の要素をターゲットにするものを指定しています.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>