原版自动标签切换 javascript

Question

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

我已经搜索了解决方案，但找不到任何适合香草的东西 javascript 或不明白（我是个大人物）。 jquery 中提供了大多数解决方案。但我只想要 javascript.

这是这个问题的代码笔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");
}

Answer 1

您可以在此处使用我的，方法是对您的代码进行一些小的更改（在全页视图中打开以显示选项卡按钮）：

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

上试用

原版自动标签切换 javascript

Automatic tab switch in vanilla javascript

html

javascript

css

tailwind-css