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

Val: 229

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

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

2.084 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 JavaScript en: https://www.lawebdelprogramador.com/codigo/JavaScript/6328-Seleccionar-la-opcion-se-menu-segun-la-pagina-donde-estamos-con-JavaScript.html

Publicado el 28 de Junio del 2020

2.085 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="pagina4.html">pagina4</a></li>

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

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

</ul>

</body>

</html>

<script src="https://code.jquery.com/jquery-latest.js"></script>

<script>

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

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

$('ul > li a[href]').filter(function() {

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

    // de la url de la pagina actual

    return basename(this.href) === basename(window.location.pathname);

}).addClass('selected');

</script>

No hay comentarios


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/s6329

Cambiar los caracteres introducidos a mayúsculas con JQuery

Separador de horas y minutos (:) automáticamente con jquery