Markup:
<ul>
<li role="presentation" class="active">
<a href="#1" aria-controls="1" role="tab">How to Install for iPad</a>
</li>
<li role="presentation">
<a href="#2" aria-controls="2" role="tab">How to Install for Mac</a>
</li>
<li role="presentation">
<a href="#3" aria-controls="3" role="tab">How to Install for PC</a>
</li>
</ul>
When I use document.querySelectorAll('[role="presentation"]'); the result is array [li.active,li,li]
How can I remove .active class and attach it to any other of these li with plain JS w/o JQuery the more simplest way?
Try this:
// remove active class from all elements
document.querySelectorAll('[role="presentation"]').forEach(function (el){
el.classList.remove("active");
});
// add class 'active' to last element
document.querySelectorAll('[role="presentation"]:last-of-type')[0].classList.add("active")
Notes:
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With