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')) 
    }); 
})()