次のボタンをクリックして、同じクラスのdivを1つ1つ表示する方法は？

Question

私は同じクラスのdivを持っています。私はここで私はクラスがQUEを逃してい

<ul class="tabs questiontabs"> 
    <li class="tab completed_que disabled"><a href="#questions1">1</a></li> 
    <li class="tab completed_que disabled"><a href="#questions2">2</a></li> 
    <li class="tab missedque"><a class="active" href="#questions3">3</a></li> 
    <li class="tab completed_que disabled"><a href="#questions4">4</a></li> 
    <li class="tab missedque"><a href="#questions5">5</a></li> 
    <li class="tab completed_que disabled"><a href="#questions6">6</a></li> 
    <li class="tab missedque"><a href="#questions7">7</a></li> 
    <li class="tab missedque"><a href="#questions8">8</a></li> 
</ul> 

次へ]ボタンをクリックして次のdivにクラスを追加し、前のdivのクラスを削除する必要があります。次のボタンをクリックすると、次の欠落したキューdivに移動します。

Answer 1

let next = document.getElementById('next') 
let tabs = document.getElementsByClassName('tab') 

// Add active state to first tab 
tabs[0].classList.add('tab--active') 

next.addEventListener('click', function() { 
    let active = [...tabs].filter(tab => tab.classList.contains('tab--active')) 
    let nextActive = active[0].nextElementSibling 
    active[0].classList.remove('tab--active') 
    nextActive.classList.add('tab--active') 
}