vanilla javascript中的自動選項卡切換

Question

我用 Javascript 構建了一個標簽系統。 手動它工作正常，但我希望它自動工作。 我想要一個無限循環，我以 6 秒的間隔遍歷每個選項卡，然后再次從選項卡的開頭開始。 當用戶點擊一個標簽時，這個循環應該停止。

我已經搜索了解決方案，但找不到任何適用於 vanilla javascript 的內容或不明白（我是個大佬）。 大多數解決方案都可以在 jquery 中使用。 但我只想要 javascript。

這是這個問題的代碼筆

這是示例 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

您可以在此處使用我的Interval Generator （又名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上試試

vanilla javascript中的自動選項卡切換

問題描述

1 個解決方案

解決方案1
1 已采納 2020-11-24 15:14:15

vanilla javascript中的自動選項卡切換

問題描述

1 個解決方案

解決方案1 1 已采納 2020-11-24 15:14:15

解決方案1
1 已采納 2020-11-24 15:14:15