javascript - 如何在具有重复 ID 的 Bootstrap 选项卡窗格之间切换

Question

我的页面中有两个选项卡控件，其中选项卡窗格具有相同的 ID。当我在第二个控件中切换选项卡时，内容不会更新并且仍然显示最后选择的窗格。我在某处读过 Bootstrap 处理通过 ID 切换（必须是唯一的）以使其工作，但我的用例具有重复的 ID 是不可避免的。

<div>
  <ul class="nav nav-tabs" id="myTab1" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home 1</div>
    <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">Profile</div>
  </div>
</div>
<br />
<div>
  <ul class="nav nav-tabs" id="myTab2" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact2" aria-selected="false">Contact</a>
    </li>
  </ul>
  <div class="tab-content" id="myTabContent">
    <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Home 2</div>
    <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Contact</div>
  </div>
</div>

以下是初始显示的示例屏幕截图：

主页选项卡具有相同的 ID。当我在第二组中选择联系人选项卡然后切换到主页选项卡时，内容仍然是联系人。

jQuery 或 JavaScript 中有没有一种方法可以让我通过 onclick 显示正确的选项卡？与此类似的东西：

$('#myTab2 a[href="#home"]').tab('show');

标签： javascriptjqueryhtmltwitter-bootstrap

Answer 1

使用类而不是 id，使用 javascript 或 jquery 定位 id 只会让您获得第一个实例，即具有该 id 的第一个元素。