Resaltar automáticamente enlaces con jQuery
julio 30th, 2009A modo de apunte, os dejo un método breve, usando jQuery, para resaltar los enlaces que apuntan a la página en la que nos encontramos. Muy útil, por ejemplo, para destacar en los menús la opción seleccionada automáticamente sin recurrir a PHP o a hacerlo manualmente:
$(document).ready( function() { var loc = document.location.href.split(/[\?#]/).shift().replace(/\/$/, ''); $("a").each(function() { if (this.href == loc) $(this).addClass("selected"); }); } );
El funcionamiento es muy simple. Recorre todos los elementos <a> de la página y compara el parámetro href con la url actual. Si coincide, añade la clase ‘selected‘ a dicho elemento. La clase ‘selected’ deberá estar definida dentro de los estilos css de la página.
Un ejemplo aquí.
Actualización: Ahora no tiene en cuenta si la URL tiene barra al final o no (como en el caso de las carpetas)
Hey, en WordPress hay un pequeño problema y no se muestra correctamente. No se si porque lo estoy probando en localhost o qué, pero no funca.
Lo arreglé quitando desde split en adelante y funciona perfectamente. No se si debería tener en cuenta todo ese código, la verdad no lo comprendo del todo muy bien pero no creo que me haga falta por lo menos por ahora…
Saludos,
Hola Nicolás
El “problema” de WordPress es que se sirve de parámetros (lo que va después de ? en la URL) para servir una página u otra, a menos que modifiques esto en las preferencias para que use URLs del tipo ‘amigables’ que llaman.
Podría solucionase quitando solamente el símbolo ‘?‘ de la función split() que comentas, para que tenga en cuenta los parámetros, quedando así:
El problema de esto es que el hecho de cambiar cualquier otro parámetro hace que no funcione correctamente; pero quizá así pueda valerte.