Código de JavaScript - Seleccionar la opción de menú según la pagina donde estamos con JavaScript

Val: 3.506

Seleccionar la opción de menú según la pagina donde estamos con JavaScript

Actualizado el 30 de Junio del 2020 por Joel (150 códigos) (Publicado el 28 de Junio del 2020)

2.485 visualizaciones desde el 28 de Junio del 2020

Código de busca la url de la pagina donde nos encontramos dentro de las urls del menú de nuestra pagina y añade un estilo a dicho enlace para diferenciarlo del resto. En este ejemplo se añade el estilo CSS "selected" que lo pone en negrita.

Puedes ver el mismo código en JQuery en: https://www.lawebdelprogramador.com/codigo/JQuery/6329-Seleccionar-la-opcion-se-menu-segun-la-pagina-donde-estamos-con-JQuery.html

Publicado el 28 de Junio del 2020

2.486 visualizaciones desde el 28 de Junio del 2020

<!DOCTYPE html>

<html>

<head>

<style>

a:link, a:visited, a:hover {color:Blue;}

.selected {font-weight:bold;}

</style>

</head>

<body>

<ul>

    <li><a href="pagina1.html">pagina1</a></li>

    <li><a href="pagina2.html">pagina2</a></li>

    <li><a href="pagina3.html">pagina3</a></li>

    <li><a href="x3.html">pagina4</a></li>

    <li><a href="pagina5.html">pagina5</a></li>

    <li><a href="pagina6.html">pagina6</a></li>

</ul>

</body>

</html>

<script>

const basename = url => url.split("/").reverse()[0];

// La función filter, solo nos devuelve los elementos que cumplen con la condicion

const coincidencia=Array.from(document.querySelectorAll('ul > li a[href]')).filter(el =>

    // obtenemos cada uno de los nombres de las urls y lo comparamos con el nombre

    // de la url de la pagina actual

    basename(el.href) === basename(window.location.pathname)

// Añadimos la clase "selected" solo si hay alguna coincidencia

coincidencia.length>0 ? coincidencia[0].classList.add('selected') : undefined;

</script>

30 de Junio del 2020

Hola, tengo una duda...

const coincidencia=Array.from(document.querySelectorAll('ul > li a[href]')).filter(el =>

// obtenemos cada uno de los nombres de las urls y lo comparamos con el nombre

// de la url de la pagina actual

basename(el.href) === basename(window.location.pathname)

¿Cómo podría declarar los enlaces de los <li> que tienen una clase determinada?
gracias.

Responder

30 de Junio del 2020

No se muy bien como lo tienes, pero por ejemplo, sin en el <a href... tienes la class="opcion1", seria algo así:

'ul > li a[href].opcion1'

Responder

4 de Julio del 2020

No ha dejado ningún comentario

Responder


Nombre

Correo (no se visualiza en la web)

Valoración

Comentarios...

CerrarCerrar

Es necesario revisar y aceptar las políticas de privacidad

Acepto las políticas de privacidad

http://lwp-l.com/s6328

Caja de comentarios HTML y Javascript

Utilizar un input type timer con varios rangos de horas