Question

我的主页上有一个类似的引导程序导航（没有禁用标签）：

<ul class="nav nav-tabs" id="tab_home" role="tablist">
  <li class="nav-item" role="presentation">
    <a class="nav-link active" data-toggle="tab" href="#presentation" role="tab" aria-controls="presentation" aria-selected="true">Tab_1</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" data-toggle="tab" href="#plat-sem" role="tab" aria-controls="plat-sem" aria-selected="false">Tab_2</a>
  </li>
  <li class="nav-item" role="presentation">
    <a class="nav-link" data-toggle="tab" href="#avis" role="tab" aria-controls="avis" aria-selected="false">Tab_3</a>
  </li>
</ul>

我想通过每 5 秒自动点击下一个标签来添加一个 js 效果（有点像旋转木马），在循环中。我敢肯定这不是一个困难的功能，但我今天下午尝试了整个下午都没有成功。

这样的效果很好，但只是第一个（同时显示接下来的2个内容，为什么？）：

setInterval(function() {
    document.getElementById("id_tab_2").click();
}, 5000);

我也尝试过类似的方法但没有成功：

function click_tabs(tab) {
    setInterval(function() {
        tab.click();
    }, 5000);

    // OR
    // tab.addEventListener("click", function() {
    //     setInterval(function() {
    //         tab.click();
    //     }, 5000);
    // })
}
document.querySelectorAll("#tab_home a").forEach((tab) => click_tabs(tab));

我该怎么做才能取得好成绩？

Answer 1

您可以执行以下操作。如果 currentTab 超过页面上的标签数量，请将其重置为 first。

let currentTab = 0;
setInterval(() => {
   var tabs = document.querySelectorAll("#tab_home a");
   tabs[currentTab].click();
   currentTab++;
   
   if (currentTab >= tabs.length)
    currentTab = 0;
}, 5000);

Answer 2

您正在单击选项卡但未关闭它。您可以创建一个不执行任何操作的按钮或选项卡。所以， (1)点击TAB1 (2)然后它应该睡一段时间 (3) 点击一个我不想的标签或按钮 (4) 单击 TAB2 按照2,3

如何在引导导航（如轮播）上创建自动点击功能？

2 个答案: