sinprogramar.blogspot.com

8/8/12

Marcar menú activo con jQuery

Sencilla función que con la ayuda de jQuery detecta si el enlace del menú de navegación es el mismo que la pagina actual y le asigna una clase CSS.

Para enlaces de menú con ruta relativa y sin parámetros:
$(document).ready(function(){
    url_completa = location.href; //URL de la pagina actual
    url_incio = url_completa.lastIndexOf("/");
    pagina_actual = url_completa.slice(url_incio+1); // Extraemos el nombre de la pagina
    $(".menu li a[href='"+ pagina_actual +"']").addClass("activo"); //Asignamos la clase llamada "activo"
});

Para enlaces de menú con ruta absoluta y parámetros:
$(document).ready(function(){
    url_completa = location.href;
    parametros = url_completa.split("?");
    url_filtrada = parametros[0];
    $(".categorias li a[href='"+ url_filtrada +"']").addClass("activo");

}); 

Para enlaces de menú con ruta absoluta y sin parámetros (por ejemplo wordpress):
$(document).ready(function(){
    url_completa = location.href;
    $(".categorias li a[href='"+ url_completa +"']").addClass("activo");

});

3 comentarios:

  1. no funciona

    Parse error: syntax error, unexpected '(', expecting T_VARIABLE or '$' in /homepages/41/d433944602/htdocs/wordpress/wp-content/themes/twentyeleven/functions.php on line 627

    ResponderEliminar
  2. Me ha salvado. Gracias.

    ResponderEliminar
  3. Muy bueno, despues de probar con varios

    ResponderEliminar

Nota: solo los miembros de este blog pueden publicar comentarios.


Creative Commons License