Bootstrap 5 - 两个导航一个标签内容

Question

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

我为 bootstrap 3 找到了类似的解决方案，但我无法为 bootstrap 5 正确翻译它，我不擅长脚本。 为选项卡内容引导多个导航选项卡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>

Answer 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");

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

Answer 2

这是我针对 bootstrap@5.2.3 的解决方案

 $('.nav-pills button').click(function() { var $selector = $('.nav-pills button[data-bs-target="' + $(this).attr("data-bs-target") + '"]').not(this); var nav = $selector.closest('.nav-pills'); nav.find('button').removeClass("active"); $selector.addClass("active"); });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" crossorigin="anonymous"> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> </ul> <div class="tab-content" id="pills-tabContent"> <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Content 1</div> <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Content 2</div> <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Content 3</div> </div> <br/> <ul class="nav nav-pills mb-3" id="pills-tab2" role="tablist"> <li class="nav-item" role="presentation"> <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button> </li> <li class="nav-item" role="presentation"> <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button> </li> </ul>