Wie div einzeln angezeigt werden, die gleiche Klasse haben, indem Sie auf die nächste Schaltfläche klicken?

Question

Ich habe div mit der gleichen Klasse. Ich brauche Klasse in die nächste div hinzuzufügen und die Klasse für das vorherige div zu entfernen, indem

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

Here i am nächsten Button haben die Klasse verpasst que. Wenn ich auf den nächsten Knopf klicke, sollte es zum nächsten verpassten que div gehen.

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