如何通过单击下一步按钮逐个显示div？

Question

我有同班的div。我需要将类添加到下一个div并通过单击下一个按钮

删除前一个div的类

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

这里我有班级错过了。当我点击下一个按钮时，它应该转到下一个错过的que 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')
}