Automatic tab switch in vanilla javascript

Question

I built a tabbing system with Javascript. Manually It works fine but i want it to work automaticaly. I want an infinite loop where I iterate through each tab with the interval of 6sec and then start from the beginning of the tab again. and when the user click on a tab this loop should stop.

I've searched for solution but could'nt find anything for vanilla javascript or did'nt understand (i'm a biggener). most of the solutions are available in jquery. but I only want javascript.

here is the codepen for this problem Codepen

Here is the sample Html code

<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>

and 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

You can use my Interval Generator (aka. Async Loop ) here, by making some little changes to your code (open in full-page view for the tab buttons to appear):

 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>

Try it on CodePen

Automatic tab switch in vanilla javascript

Question

1 answers

solution1
1 ACCPTED 2020-11-24 15:14:15

Automatic tab switch in vanilla javascript

Question

1 answers

solution1 1 ACCPTED 2020-11-24 15:14:15

solution1
1 ACCPTED 2020-11-24 15:14:15