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

1wnzp6jl 于 2022-12-25 发布在 Java

关注(0)|答案(2)|浏览(178)

我的代码由三个相同的块组成，每个块至少有两个导航和一个选项卡内容。问题是，我不能使它在我单击一个项目时取消选择另一个列表中的活动项目
我为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>

JavaScript

来源：https://stackoverflow.com/questions/69473656/bootstrap-5-two-navs-one-tab-content

2条答案

按热度按时间

jchrr9hc1#

在阅读文档之后，我编写了以下脚本：

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

解决办法并不理想，但期限很紧。

赞(0）回复(0）举报 2022-12-25

z2acfund2#

下面是我的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>

赞(0）回复(0）举报 2022-12-25

我来回答

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

2条答案

相关问题

热门标签

最新问答