I am working with a set of list items (<li>) inside an unordered list (<ul>). I have created a JavaScript function that adds the 'active' class to the clicked item and removes it from its siblings. However, I only want this functionality to apply to all items except for the last <li> in the list.
<ul class='tabs'>
<li>Home</li>
<li>About</li>
<li>Contact</li>
<li>
<form>
<input type='text'/>
<button></button>
</form>
</li>
</ul>
Below is the JavaScript function:
[].forEach.call(document.querySelectorAll('.tabs li'), function(item) {
item.addEventListener('click', function(event) {
if (item.nextSibling) {
document.querySelector(".tabs li.active").classList.remove("active");
item.classList.add("active");
}
});
});