Tengo una barra lateral con páginas del sitio. Quiero cambiar el color de una página seleccionada actualmente cuando se hace clic, asignar la clase activa al elemento seleccionado actualmente y eliminarlo de todos los demás. Aquí está el HTML:
<aside id="side-bar" class="sidebar"> <h3>Pages</h3> <nav class="menu"> <a onclick="changeColor()" class="menu-item is-active">page 1</a> <a onclick="changeColor()" class="menu-item">page 2</a> <a onclick="changeColor()" class="menu-item">page 3</a> </nav> </aside>Y CSS:
.sidebar .menu .menu-item:hover, .sidebar .menu .menu-item.is-active { color: #f1672c; border-right: 6px solid #f1672c; }Cada elemento tiene la función de cambio de color que debe tomar todos los elementos, eliminar la clase activa del elemento seleccionado anterior y agregar al elemento actual en el que se hizo clic.
function changeColor(){ var links = document.getElementsByClassName("menu-item") links.map(classList.remove("is-active")) this.classList.add("is-active") }¿Qué me estoy perdiendo?
Ese changeColor() no es necesario....
const pages = document.querySelectorAll(".menu-item"); pages.forEach((item) => { item.addEventListener('click', active_item); }) function active_item () { pages.forEach((item) => { item.classList.remove('is-active'); }); this.classList.add('is-active'); } .is-active { background-color: red; } <aside id="side-bar" class="sidebar"> <h3>Pages</h3> <nav class="menu"> <a class="menu-item is-active">page 1</a> <a class="menu-item">page 2</a> <a class="menu-item">page 3</a> </nav> </aside>Simplemente pase la referencia del elemento actual con this .
function changeColor(el){ document.querySelector(".menu-item.is-active").classList.remove("is-active") el.classList.add("is-active") } .sidebar .menu .menu-item:hover, .sidebar .menu .menu-item.is-active { color: #f1672c; border-right: 6px solid #f1672c; } <aside id="side-bar" class="sidebar"> <h3>Pages</h3> <nav class="menu"> <a onclick="changeColor(this)" class="menu-item is-active">page 1</a> <a onclick="changeColor(this)" class="menu-item">page 2</a> <a onclick="changeColor(this)" class="menu-item">page 3</a> </nav> </aside>