Tengo el javascript escrito correctamente para agregar y eliminar una clase activa de un elemento en el que se hizo clic, pero cuando hago clic en un elemento, la clase activa no se elimina del hermano.
¿Cómo hago clic en un hermano (haciéndolo activo) y elimino la clase activa de otros hermanos?
let navItems = document.querySelectorAll('li'); navItems.forEach(navItem => { navItem.addEventListener('click', () => { navItem.classList.contains('active') ? navItem.classList.remove('active') : navItem.classList.add('active'); }); }); ul { display: flex; max-width: 500px; margin: 0 auto; justify-content: space-between; margin-top: 1em; } ul li { list-style-type: none; padding: 5px 10px; cursor: pointer; } ul li.active { background: darkred; color: white; } <ul> <li class="active">Home</li> <li>About</li> <li>Products</li> <li>Sales</li> <li>Contact</li> </ul>¿Por qué no usas la delegación de eventos ? De esta manera:
menu.onclick = e => { var el = e.target; if (el.tagName != "LI") return; menu.querySelector(".active").removeAttribute("class"); el.setAttribute("class", "active"); } ul { display: flex; max-width: 500px; margin: 0 auto; justify-content: space-between; margin-top: 1em; } ul li { list-style-type: none; padding: 5px 10px; cursor: pointer; } ul li.active { background: darkred; color: white; } <ul id="menu"> <li class="active">Home</li> <li>About</li> <li>Products</li> <li>Sales</li> <li>Contact</li> </ul>Puede hacerlo más fácil si coloca un nombre de clase en la etiqueta UL para que pueda hacer referencia solo a los elementos que contiene. Luego, en su oyente, haga referencia al argumento del event (lo llamé e )
let navItems = document.querySelectorAll('.navigation li'); navItems.forEach(navItem => { navItem.addEventListener('click', e => { document.querySelector('.navigation li.active').classList.remove('active'); e.target.classList.add('active'); }); }); ul { display: flex; max-width: 500px; margin: 0 auto; justify-content: space-between; margin-top: 1em; } ul li { list-style-type: none; padding: 5px 10px; cursor: pointer; } ul li.active { background: darkred; color: white; } <ul class='navigation'> <li class="active">Home</li> <li>About</li> <li>Products</li> <li>Sales</li> <li>Contact</li> </ul>