Bootstrap 5 - 两个导航一个选项卡内容答案

【问题标题】：Bootstrap 5 - two navs one tab-contentBootstrap 5 - 两个导航一个选项卡内容
【发布时间】：2021-10-06 23:11:46
【问题描述】：

我的代码由三个相同的块组成，每个块至少有两个导航和一个选项卡内容。问题是我做不到，所以当我单击一个项目以取消选择另一个列表中的活动项目时

我为 bootstrap 3 找到了类似的解决方案，但我无法为 bootstrap 5 正确翻译它，我不擅长使用脚本。 bootstrap multiple nav tabs for tab content another solution for BS3

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.min.js"></script>

<div class="MyTabPillsOne">
  <div class="hr-text hr-text-left m-t-2 m-b-1">
    <h6><strong>List 1</strong></h6>
  </div>
  <div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <button class="nav-link active" data-bs-toggle="pill" data-bs-target="#tab-1" type="button" role="tab" aria-controls="tab-3" aria-selected="true">1</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-2" type="button" role="tab" aria-controls="tab-3" aria-selected="false">2</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-3" type="button" role="tab" aria-controls="tab-3" aria-selected="false">3</button>
  </div>

  <div class="hr-text hr-text-left m-t-2 m-b-1">
    <h6><strong>List 2</strong></h6>
  </div>
  <div class="nav nav-pills mb-3" id="pills-tab" role="tablist">
      <button class="nav-link " data-bs-toggle="pill" data-bs-target="#tab-a" type="button" role="tab" aria-controls="tab-a" aria-selected="false">a</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-b" type="button" role="tab" aria-controls="tab-b" aria-selected="false">b</button>
      <button class="nav-link" data-bs-toggle="pill" data-bs-target="#tab-c" type="button" role="tab" aria-controls="tab-c" aria-selected="false">c</button>
  </div>

  <div class="tab-content">
    <div class="tab-pane" id="tab-1">
      <h1>1</h1>
    </div>
    <div class="tab-pane" id="tab-2">
      <h1>2</h1>
    </div>
    <div class="tab-pane" id="tab-3">
      <h1>3</h1>
    </div>
    <div class="tab-pane" id="tab-a">
      <h1>A</h1>
    </div>
    <div class="tab-pane" id="tab-b">
      <h1>B</h1>
    </div>
    <div class="tab-pane" id="tab-c">
      <h1>C</h1>
    </div>
  </div>

</div>

【问题讨论】：

那么您是要单击一个元素以取消选择另一个列表中的活动项，还是同步这些列表？
是的，我想点击一个元素来取消选择另一个列表中的活动项目
如果你想使用原生的 bootstrap js 来控制哪些元素是“活跃的”，你不能有两个单独的 nav-pills tablist 在 html 中分开而是组合在一起。您可以轻松地使用 js 来控制哪些是活动的和响应。另一种选择是挂钩引导 js 事件，这仍然需要编写 js。另一种选择，这可能对您更好，制作一个导航链接列表，但将它们定位不同。所以它们看起来是分开的，但实际上不是。
无法创建一个列表。两个列表都在代码的不同部分（在手风琴折叠中）

标签： javascript jquery bootstrap-5 bootstrap-tabs

【解决方案1】：

阅读文档后，我写了这个脚本：

function selectorFlow(selector) {
    document
        .querySelectorAll(
            "." + selector + ' .nav-link[data-bs-toggle="pill"]'
        )
        .forEach((t, i) => {
            t.addEventListener("show.bs.tab", function (e) {
                var active = document.querySelector(
                    "." + selector + " .nav-link.active"
                );
                active.classList.remove("active");
            });
        });
}

selectorFlow("MyTabPillsOne");
selectorFlow("MyTabPillsTwo");
selectorFlow("MyTabPillsThree");

解决方案并不理想，但期限很紧。

【讨论】：