多个独立的引导选项卡集，带有选项卡式内容

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 divs以及它们各自的锚点切换以解决问题。