Hago un menú y alguna sección. Este sitio web funciona como vcard, por lo que cuando hizo clic en un elemento del menú, debe agregar la clase mostrar a la sección y mostrar esta sección y la clase activa al elemento del menú. Entonces, el elemento del menú es simple y funciona para mí, pero ahora cómo agregar un espectáculo de clase.
HTML <nav class="nav-desktop"> <div class="nav-items"> <a class="nav-item" href="#about">About</a> <a class="nav-item" href="#ourteam">Skills</a> <a class="nav-item" href="#contact">Contact</a> </div> </nav> <section class="about section show" id="about"></section> <section class="ourteam section" id="ourteam"></section> <section class="contact section" id="contact"></section> const allNavItem = document.querySelectorAll('.nav-item') function removeActiveMenu() { allNavItem.forEach(item => { item.classList.remove('active') }) } allNavItem.forEach(item => { item.addEventListener('click', () => { removeActiveMenu() item.classList.add('active') }) })Entonces, ahora, ¿cómo puedo agregar la clase 'show' a la sección ourteam cuando hago clic en ourteam en el menú y lo elimino de la sección acerca de? Cómo combinar esto.
Simplemente elimine todo el estado activo / mostrar y luego agregue nuevamente para el elemento adecuado
const sections = document.querySelectorAll('.section'); const navItems = document.querySelectorAll('.nav-item'); navItems.forEach(navItem => { navItem.addEventListener('click', function(e) { e.preventDefault(); // remove all active / show state navItems.forEach( item => item.classList.remove('active') ); sections.forEach( section => section.classList.remove('show') ); // add active / show state again this.classList.add('active'); const target = this.getAttribute('href'); document.querySelector(target)?.classList.add('show'); }); });