javascript Bootstrap 5选项卡窗格自动打开时间间隔

bd1hkmkf 于 2022-12-25 发布在 Java

关注(0)|答案(1)|浏览(151)

我希望bootstrap 5选项卡窗格在任何setTime间隔上自动切换选项卡，就像在Carousel中一样。
虽然给定链接（"Click Here"）上的代码可以工作，但它非常旧，只适用于bootstrap 3。有人能帮我让它在Bootstrap 5上工作吗？
如果有人能提供下面的 Bootstrap 代码的工作代码，那就太好了。

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">...</div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/74896335/bootstrap-5-tab-pane-auto-switch-on-time-interval

1条答案

按热度按时间

5gfr0r5j1#

添加jquery cdn并尝试以下操作

var tabChange = function () {
  var tabs = $(".nav-tabs > button");
  var active = tabs.filter(".active");
  var next = active.next("button").length
    ? active.next("button")
    : tabs.filter(":first-child");
  next.tab("show");
};
var tabCycle = setInterval(tabChange, 2000);
$(function () {
  $(".nav-tabs button").click(function(e) {
    e.preventDefault();
    clearInterval(tabCycle);
    $(this).tab("show");
    setTimeout(function() {
      tabCycle = setInterval(tabChange, 2000);
    }, 2000);
  });
});

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

我来回答

javascript Bootstrap 5选项卡窗格自动打开时间间隔

1条答案

相关问题

热门标签

最新问答