javascript - 如何使 Bootstrap 多个选项卡组共享相同的ID

Question

首先，我明白不应有同一 ID 的多个实例，但我正在寻找更好的解决方案来帮助我完成我的要求。以下只是我正在尝试做的一个示例:

<div class="tab-group-1">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#abc1" data-toggle="tab">Home</a></li>
    <li><a href="#abc2" data-toggle="tab">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="abc1">Home tab content</div>
    <div class="tab-pane" id="abc2">About tab content</div>
  </div>
</div>


<div class="tab-group-2">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a href="#abc1" data-toggle="tab">Home</a></li>
    <li><a href="#abc2" data-toggle="tab">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="abc1">Home tab content</div>
    <div class="tab-pane" id="abc2">About tab content</div>
  </div>
</div>

Answer 1

这里有一些东西，但你有一些小变化:

Bootply:http://www.bootply.com/U0LkomjCne

解释:将 a[href] 更改为 a[data-target] 并使用包装类为目标添加前缀。

HTML:

<div class="tab-group-1">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a data-target=".tab-group-1 #abc1" data-toggle="tab">Home</a></li>
    <li><a data-target=".tab-group-1 #abc2" data-toggle="tab">About</a></li>
  </ul>
  <div class="tab-content">
    <div class="tab-pane active" id="abc1">Home tab content</div>
    <div class="tab-pane" id="abc2">About tab content</div>
  </div>
</div>

<div class="tab-group-2">
  <ul class="nav nav-tabs" role="tablist">
    <li class="active"><a data-target=".tab-group-2 #abc1" data-toggle="tab">Home</a></li>
    <li><a data-target=".tab-group-2 #abc2" data-toggle="tab">About</a></li>
  </ul>

  <div class="tab-content">
    <div class="tab-pane active" id="abc1">Home tab content</div>
    <div class="tab-pane" id="abc2">About tab content</div>
  </div>
</div>