タブ付きコンテンツを含む複数の独立したブートストラップタブのセット

Question

1ページに複数の独立したタブ付きコンテンツセットを作成しようとしています。これまでのところ、タブをクリックすると、第2領域のアクティブなコンテンツも消えます。

<div> 

    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#foo" role="tab" data-toggle="tab">Foo</a></li> 
    <li role="presentation"><a href="#bar" role="tab" data-toggle="tab">Bar</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="foo">Foo content</div> 
    <div role="tabpanel" class="tab-pane" id="bar">Bar content</div> 
    </div> 

</div> 

<div> 

    <ul class="nav nav-tabs" role="tablist"> 
    <li role="presentation" class="active"><a href="#foo" role="tab" data-toggle="tab">Foo</a></li> 
    <li role="presentation"><a href="#bar" role="tab" data-toggle="tab">Bar</a></li> 
    </ul> 

    <div class="tab-content"> 
    <div role="tabpanel" class="tab-pane active" id="foo">Foo content</div> 
    <div role="tabpanel" class="tab-pane" id="bar">Bar content</div> 
    </div> 

</div> 

Answer 1

すべてのIDはドキュメント全体で一意である必要があります。 id = fooとid = bar divとそれぞれのアンカートグルの名前を変更して問題を修正します。