vanilla javascript中的自动选项卡切换答案

【问题标题】：Automatic tab switch in vanilla javascriptvanilla javascript中的自动选项卡切换
【发布时间】：2021-03-06 16:12:44
【问题描述】：

我用 Javascript 构建了一个标签系统。手动它工作正常，但我希望它自动工作。我想要一个无限循环，我以 6 秒的间隔遍历每个选项卡，然后再次从选项卡的开头开始。当用户点击一个标签时，这个循环应该停止。

我已经搜索了解决方案，但找不到任何适用于 vanilla javascript 的内容或不明白（我是个大人物）。大多数解决方案都在 jquery 中可用。但我只想要javascript。

这里是这个问题的codepen Codepen

这里是示例 Html 代码

<div id="tabs-id">
  <ul>
    <li>
      <a onclick="changeAtiveTab(event,'tab1')"> Tab 1 </a>
    </li>
    <li>
      <a onclick="changeAtiveTab(event,'tab2')"> Tab 2 </a>
    </li>
    <li>
      <a onclick="changeAtiveTab(event,'tab3')"> Tab 3 </a>
    </li>
    <li>
      <a onclick="changeAtiveTab(event,'tab4')"> Tab 4 </a>
    </li>
  </ul>
</div>
<div class="tab-content tab-space">
  <div class="block" id="tab1">
    <div class="container">Tab 1 content</div>
  </div>
  <div class="hidden" id="tab2">
    <div class="container">Tab 2 content</div>
  </div>
  <div class="hidden" id="tab3">
    <div class="container">Tab 3 content</div>
  </div>
  <div class="hidden" id="tab4">
    <div class="container">Tab 4 content</div>
  </div>
</div>

和Javascript

function changeAtiveTab(event, tabID) {
  let element = event.target;
  while (element.nodeName !== "A") {
    element = element.parentNode;
  }
  ulElement = element.parentNode.parentNode;
  aElements = ulElement.querySelectorAll("li > a");
 
  tabContents = document
    .getElementById("tabs-id")
    .querySelectorAll(".tab-content > div");
  for (let i = 0; i < aElements.length; i++) {
    aElements[i].classList.remove("border-t-4");
    aElements[i].classList.remove("font-bold");
    tabContents[i].classList.add("hidden");
    tabContents[i].classList.remove("block");
  }

  element.classList.add("border-t-4");
  element.classList.add("font-bold");
  
  document.getElementById(tabID).classList.remove("hidden");
  document.getElementById(tabID).classList.add("block");
}

【问题讨论】：

这能回答你的问题吗？ How to output each number consecutively in an index every second?
@FZs 感谢您的建议，但这不是我问题的答案。我的问题是要添加一个自动化功能，然后在点击时删除该功能。
您可以使用clearInterval() 清除点击间隔。你不明白的部分是什么？对我来说，那里的解决方案似乎可以在这里使用......只需将console.log替换为changeAtiveTab的调用即可
@FZs 我已经应用了两个建议的解决方案，但仍然不能解决我的问题，你可以在这里查看codepen.io/Zaraa/pen/bGeXKWN?editors=1111
应该是这样的：codepen.io/FZs111/pen/qBNevNw

标签： javascript html css tailwind-css

【解决方案1】：

您可以在这里使用我的Interval Generator (aka. Async Loop)，只需对您的代码进行一些小改动（在全页视图中打开以显示选项卡按钮）：

const container = document.querySelector('#tabs-id')
const ulElement = container.querySelector('ul')
const aElements = ulElement.querySelectorAll("li > a");
const tabs = container.querySelectorAll('.tab-content > div')


function changeAtiveTab(index) {
  for (let i = 0; i < aElements.length; i++) {
    aElements[i].classList.remove("border-t-4");
    aElements[i].classList.remove("font-bold");
    tabs[i].classList.add("hidden");
    tabs[i].classList.remove("block");
  }

  aElements[index].classList.add("border-t-4");
  aElements[index].classList.add("font-bold");

  tabs[index].classList.remove("hidden");
  tabs[index].classList.add("block");
}


const generator = (function* logger() {
  while (true) {
    for (let index = 0; index < aElements.length; index++) {
      changeAtiveTab(index)
      yield
    }
  }
})()

const interval = setInterval(() => generator.next(), 4000)

for (let i = 0; i < aElements.length; i++)
  aElements[i].addEventListener('click', () => {
    clearInterval(interval)
    changeAtiveTab(i)
  })

<html>

<head>
  <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
</head>

<body>
  <div class="flex flex-wrap" id="tabs-id">
    <div class="w-full">
      <div class="hidden md:block">
        <ul class="flex w-3/4 mb-0 list-none flex-wrap mx-auto pt-3 pb-4 flex-row ">
          <li class="-mb-px last:mr-0 flex-auto text-center">
            <a class="text-sm  block pt-5 cursor-pointer leading-normal font-bold border-t-4 border-t-2">
              Tab 1
            </a>
          </li>
          <li class="-mb-px  last:mr-0 flex-auto text-center">
            <a class="text-sm  block pt-5 cursor-pointer leading-normal border-t-2">
              Tab 2
            </a>
          </li>
          <li class="-mb-px last:mr-0 flex-auto text-center">
            <a class="text-sm  block pt-5 cursor-pointer leading-normal border-t-2">
              Tab 3 
            </a>
          </li>
          <li class="-mb-px last:mr-0 flex-auto text-center">
            <a class="text-sm  block pt-5 cursor-pointer leading-normal border-t-2">
              Tab 4 
            </a>
          </li>
        </ul>
      </div>
      <div class="relative flex flex-col min-w-0 break-words bg-white w-full ">
        <div class=" py-5 flex-auto">
          <div class="tab-content tab-space">
            <div class="block">
              <div class="container mx-auto w-2/4 bg-red-300 p-20"></div>
            </div>
            <div class="hidden">
              <div class="container mx-auto w-2/4 bg-pink-300 p-20">
              </div>
            </div>
            <div class="hidden">
              <div class="container mx-auto w-2/4 bg-blue-300 p-20">
              </div>
            </div>
            <div class="hidden">
              <div class="container mx-auto w-2/4 bg-green-300 p-20">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

试试CodePen

【讨论】：