Tengo una barra de navegación que tiene cuatro nombres de sección diferentes de la página web. Cuando hago clic en uno de los nombres de la sección, quiero que esté activo (resaltado) y quiero que el nombre de la sección activa anterior ya no esté activo. He estado probando muchas funciones y códigos de JavaScript diferentes, pero no he podido tener éxito. Si alguien puede mirar mi código y decirme qué me estoy perdiendo o qué estoy haciendo mal, sería increíble. Por favor, hágamelo saber si tiene alguna pregunta con mi código o problema, estaré encantado de responder. Gracias.
Código HTML (navbar.html):
<nav class="navbar navbar-expand-lg navbar-dark bg-primary fixed-top" id="sideNav"> <a class="navbar-brand js-scroll-trigger" href="#about"> <span class="d-block d-lg-none">Joseph Smith</span> <span class="d-none d-lg-block"><img class="img-fluid img-profile rounded-circle mx-auto mb-2" src="{% static 'img/joseph_headshot.jpg' %}"alt="..." /></span> </a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button> <div class="collapse navbar-collapse" id="navbarResponsive"> <ul class="navbar-nav"> <li class="nav-item"><a class="nav-link js-scroll-trigger active" href="#about">About</a></li> <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#education">Education</a></li> <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#experience">Experience</a></li> <li class="nav-item"><a class="nav-link js-scroll-trigger" href="#skills">Skills</a></li> </ul> </div> </nav>Código JavaScript (script.js):
responsiveNavItems.map(function (responsiveNavItem) { responsiveNavItem.addEventListener('click', () => { const curr_active = document.getElementsByClassName("navbar-nav").getElementsByTagName('li').getElementsByClassName(".active"); curr_active[0].className = curr_active[0].className.replace(" active", ""); responsiveNavItem.className += " active"; } }); });Creo que el principal problema puede ser el período anterior a "activo" al buscar elementos con ese nombre de clase.
Prueba esto...
responsiveNavItems.map(function (responsiveNavItem) { responsiveNavItem.addEventListener('click', nav_link_click); }); function nav_link_click() { const curr_active = document.getElementsByClassName('navbar-nav').getElementsByTagName('li').getElementsByClassName('active'); curr_active[0].classList.remove('active'); this.classList.add('active'); }Puede usar querySelector(). Le permite encontrar el primer elemento que coincida con uno o más selectores de CSS. Puede llamar al método querySelector() en el documento o en cualquier elemento HTML.
function myFunction(e) { var elements = document.querySelector(".active"); if(elements !==null){ elements.classList.remove("active"); } e.target.className = "active"; }