jQuery para mostrar el menú activo

Para inaugurar el blog, voy a mostrar como resaltar el menú en el que estamos situados en la navegación de una web utilizando para el CSS el bootstrap de twitter. En caso de no utilizar es bootstrap, solo es necesario tener definida la clase .active en nuestro archivo CSS con los ajustes deseados.

Partimos de que tenemos un menú HTML definido con la siguiente estructura:

1
2
3
4
5
<ul class="nav">
	<li><a href="index.php">Home</a></li>
	<li><a href="recientes.php">Recientes</a></li>
	<li><a href="contact.php">Contacto</a></li>
</ul>

Necesitamos agregar jQuery a nuestro documento html antes de poder usarlo:

1
<script type="text/javascript" src="ruta-archivo-jQuery.js"></script>

Una de las diferentes maneras puede ser con jQuery y el siguiente código:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script type="text/javascript">
    $(document).ready(function(){
        var cambio = false;
        $('.nav li a').each(function(index) {
            if(this.href.trim() == window.location){
                $(this).parent().addClass("active");
                cambio = true;
            }
        });
        if(!cambio){
            $('.nav li:first').addClass("active");
        }
    });
</script>

El efecto final que conseguiremos cuando estemos visualizando el menú “HOME”:

Menu activo con jQuery

 

Espero que os ayude.

 

21 comentarios en “jQuery para mostrar el menú activo


  1. $(document).ready(function(){
    var cambio = false;
    $('.nav li a').each(function(index) {
    if(this.href.trim() == window.location){
    $(this).parent().addClass("active");
    $(this).closest('.dropdown').addClass("active");
    cambio = true;
    }
    });
    if(!cambio){
    $('.nav li:first').addClass("active");
    }
    });

  2. Es válido agregar esta línea para dar clase “active” a los dropdowns menus o menus de lista desplegable en twitter bootstrap.

    $(this).closest('.dropdown').addClass("active");

    Gracias por compartir el código, ahí les dejo otra mejora.

    Saludos.

  3. Gracias, me sirvió para un menu dentro de wordpress, ya que ahí el menú siempre es el mismo y va cambiado el la parte del contenido. Muy agradecido

  4. Pingback: claude
  5. Fantástico, me funciona perfectamente. Usándolo me surge una duda, si tengo un menú desplegable con diferentes subsecciones, cómo se marca activo a la sección principal…??

    Muchas gracias!

Deja un comentario: