javascript選項卡無法正常工作

Question

我有問題。一切工作正常，但如果我添加更多的標籤，所以「isVisible」類被添加到所有其他標籤。我該如何解決這個問題？

HTML：

<div class="content"> 
    <button class="nextTab">Next Tab</button> 
    <div class="tabs"> 
    <div class="tabs__item isActive"> 
     <p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    <div class="tabs__item"> 
     <p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> 
    </div> 
    </div> 
</div> 

使用Javascript（巴貝爾）

(() => { 
    const tabs = document.querySelector('.tabs') 
     , tabsItem = document.querySelectorAll('.tabs__item') 
     , nextTab = document.querySelector('.nextTab') 

    nextTab.addEventListener('click',() => { 
     for(let i = 0; i < tabsItem.length; i++) { 
      tabsItem[i].classList.toggle('isActive') 
     } 
    }) 
})() 

Answer 1

你應該爲了能夠切換到下一個跟蹤當前選項卡的索引。

(() => { 
    const tabs = document.querySelector('.tabs') 
     , tabsItem = document.querySelectorAll('.tabs__item') 
     , nextTab = document.querySelector('.nextTab') 
     , currentTab = 0; 

    nextTab.addEventListener('click',() => { 
     if (++currentTab > tabsItem.length - 1) currentTab = 0; 
     document.querySelector('.isActive').classList.remove('isActive')); 
     tabsItem[currentTab].classList.add('isActive')) 
    }); 
})()