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