Javascript 如何使引导多个选项卡组共享相同的ID

首先，我知道不应该有多个相同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>

主页选项卡内容
关于选项卡内容




主页选项卡内容
关于选项卡内容

这里有一些东西，但您有一些小改动：

Bootply：

解释：通过

a[data target]

更改

a[href]

，并在目标前面加上包装类

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>

主页
关于

主页选项卡内容
关于选项卡内容

主页
关于

主页选项卡内容
关于选项卡内容

通过单击例如

关于

选项卡，您希望内容和活动选项卡在这两个选项卡上都发生更改吗？下面是一把小提琴来演示这个问题：。。。。但通常，在W3CSo之后，ID必须是唯一的，您希望它做什么？您提供了一些代码，在我看来，这些代码工作得非常完美。@shadowfox看起来不错。如您所见，您单击的每个选项卡都会影响第一个选项卡组，而不是第二个…同样，这种行为是完全正常的。你告诉你的tab按钮瞄准#abc，ID应该是唯一的，所以它瞄准第一次相遇。现在，你到底想让它做什么？因为解决方法很简单，所以请给其他ID。不要同时给它们命名为abc，而是叫它们“group1 abc”和“group2 abc”？这听起来像是最终的解决方案，谢谢。有没有办法不引用父类

tab-group-1

和

tab-group-2

。我理解这需要限定范围/名称空间，但它需要模块化

此选项卡