El siguiente código se usa para que mi barra lateral pueda configurar la subpágina activa y mostrar correctamente la barra lateral al actualizar la página.
Funciona bien si agrego el símbolo "#" al href de las subpáginas, pero no funcionó cuando cambié el href a cualquier otra cosa y eliminé el símbolo "#". Supongamos que quiero configurar el href como "/página de contacto/. ¿Cómo indico en el siguiente código que elija cualquier href, no solo los que contienen el símbolo hash?
<script> (() => { 'use strict' function setActiveItem() { const { hash } = window.location if (hash === '') { return } const link = document.querySelector(`.d-flex a[href="${hash}"]`) if (!link) { return } const active = document.querySelector('.d-flex .active') const parent = link.parentNode.parentNode.previousElementSibling link.classList.add('active') if (parent.classList.contains('collapsed')) { parent.click() } if (!active) { return } const expanded = active.parentNode.parentNode.previousElementSibling active.classList.remove('active') if (expanded && parent !== expanded) { expanded.click() } } setActiveItem() window.addEventListener('hashchange', setActiveItem) })() </script>// Select anything with an "href" attribute, regardless of its value document.querySelectorAll('[href]') // Select only the first link with the current page's path ("active" link) const currentPath = window.location.pathname document.querySelector(`a[href="${currentPath}"]`) // Select the currently active path including the hash const currentPathWithHash = window.location.pathname + window.location.hash document.querySelector(`a[href="${currentPathWithHash}"]`) Para evitar problemas cuando ninguno de los enlaces contiene hashes, simplemente elimine las primeras líneas de su código hasta const link = ... , que debe reemplazarse por una de las opciones anteriores (edítelo según sus necesidades).
También noté que si active también es el enlace actual, terminará primero agregando la clase active y eliminándola más tarde en su código. Cambie el orden de esta manera para evitar eso:
active.classList.remove('active') link.classList.add('active') Tenga en cuenta que si pudiera haber más de un enlace en la página que apunte a la ruta actual, probablemente debería agregar más selectores, como un nombre de clase que usa para los enlaces de destino. A menos, por supuesto, que desee apuntar a cualquier enlace con esa ruta, en cuyo caso solo use document.querySelectorAll . El tuyo parece estar bajo un contenedor .d-flex , así que añádelo a mis ejemplos.