具有選項卡式內容的多個獨立的引導程序選項卡

Question

我試圖在一個頁面上擁有多個獨立的選項卡式內容集。到目前爲止，當我點擊一個標籤時，第二個區域中的活動內容也會消失。

<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以及它們各自的錨點切換來解決問題。