Así es como se ve mi código:
<div class="header-nav navbar-collapse collapse "> <ul id="navigation" class=" nav navbar-nav"> <li> <a href="index.html">Home</a> </li> <li> <a href="about-us.html">About Us</a> </li> </ul> </div>He estado tratando de agregar la clase activa a cada uno de ellos cuando el usuario está en esa página específica, pero hasta ahora no he tenido éxito Así es como se ve mi secuencia de comandos:
var i = 0; [].forEach.call(document.querySelectorAll('li > a'), function(nav) { console.log(nav.pathname,window.location.pathname); if (nav.pathname === window.location.pathname){ i = 1; console.log(i); nav.classList.add('active') } else{ console.log(i) nav.classList.removeClass('active') } })La clase activa está configurada en "a", no en "li", y no sé cómo solucionarlo. Tal vez alguien me puede ayudar?
Para apuntar al elemento principal, tiene algunas opciones: mi favorito es element.closest (selector) que toma un element inicial y encuentra el elemento principal closest que coincide con el selector
let els = document.querySelectorAll('li > a'); els.forEach(el => { el.addEventListener('click', e => { els.forEach(a => a.closest('li').classList.remove('active')); e.target.closest('li').classList.add('active'); }) }) li.active { background-color: green; } <ul> <li><a href='#'>link 1</a></li> <li><a href='#'>link 1</a></li> <li><a href='#'>link 1</a></li> </ul>Al observar las clases, parece que puede estar usando Bootstrap. Agregué esas bibliotecas al fragmento y actualicé algunas de las clases. También agregué otro elemento de navegación con href igual a js , ya que ese es el nombre de ruta para la ventana de fragmentos. De lo contrario, no agregará la clase activa ya que no habría un nombre de ruta que fuera igual.
También cambié los elementos de navegación a píldoras, para que pueda ver el enlace activo más fácilmente.
var i = 0; document.querySelectorAll('ul.nav > li > a').forEach((nav) => { console.log({ navPathname: nav.pathname, windowLocationPathname: window.location.pathname, areEqual: nav.pathname === window.location.pathname, }); if (nav.pathname === window.location.pathname) { nav.classList.add('active') } else { nav.classList.remove('active') } }) <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script> <div class="navbar navbar-light bg-light"> <ul id="navigation" class="nav nav-pills"> <li class="nav-item"> <a class="nav-link" href="index.html">Home</a> </li> <li class="nav-item"> <a class="nav-link" href="js">JS</a> </li> <li class="nav-item"> <a class="nav-link" href="about-us.html">About Us</a> </li> </ul> </div>Gracias por esto, fusioné las dos respuestas y las convertí en una que funciona para mí, este es el script que funcionó sin siquiera tocar las clases en la barra de navegación:
document.querySelectorAll('ul.nav > li > a').forEach((nav) => { console.log({ navPathname: nav.pathname, windowLocationPathname: window.location.pathname, areEqual: nav.pathname === window.location.pathname, }); if (nav.pathname === window.location.pathname) { nav.closest('li').classList.add('active') } else { nav.closest('li').classList.remove('active') } })