如何在引导导航(如旋转木马)上创建自动点击功能

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>

我想添加一个js效果(有点像旋转木马(，每5秒自动点击一次下一个选项卡，即循环。我相信这不是一个困难的功能，但我整个下午都在尝试，但都没有成功。

这样的东西效果很好，但只是第一个(后面两个内容同时显示，为什么？(：

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( 单击选项卡2遵循2,3