Tengo este problema con respecto al menú de la barra de navegación resaltado que solo se resaltará cuando hagamos clic en él. Para que eso funcione, estoy usando javascript. Sin embargo, cada página tiene sus propias subpáginas, por ejemplo, la página de Inicio tiene un vínculo de local/inicio, pero su contenido conducirá a local/inicio/contenido. El enlace secundario no hará que la barra de navegación funcione. La barra de navegación se codificó en un archivo diferente, que solo extiendo en la página de inicio y otras páginas. No soy muy bueno explicando, pero si puedo elaborar más en alguna parte, lo haría. A continuación adjunté mi JS y mi barra de navegación:
Barra de navegación:
<ul class="navbar-nav mr-auto" id="nav"> <li class="nav-item"> <a class="nav-link active" href="{{ url('/') }}">Home <span class="sr-only">(current)</span> </a> </li> <li class="nav-item"> <a class="nav-link" href="{{ route('courses') }}">opportunities</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ route('events') }}">events</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ route('uqalc') }}">courses</a> </li> <li class="nav-item"> <a class="nav-link" href="{{ route('contact') }}">contact</a> </li> </ul>JavaScript:
const currloc = location.href; const menuItem = document.querySelectorAll('a'); const menuLen = menuItem.length; for (let i = 0; i < menuLen; i++) { menuItem[i].classList.remove('active'); if (menuItem[i].href === currloc) { menuItem[i].className = "nav-link active"; } }Aquí, agrego una clase activa a la etiqueta de anclaje que está dentro .navbar-nav si la ubicación de la ventana es https://www.google.com/index.html
luego, este código encuentra una etiqueta de anclaje que se encuentra dentro de .navbar-nav si la etiqueta de anclaje href debe ser index.html , luego este código agrega una clase active a la etiqueta de anclaje
function removeQueryString(url) { return url.split('?')[0] } [].forEach.call(document.querySelectorAll('.navbar-nav a'), function(elem) { if (removeQueryString(elem.href) === removeQueryString(window.location.href)) elem.classList.add('active') else elem.classList.remove('active') })