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>

如何制作共享相同ID的bootstrap多选项卡组

1 个答案: