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.

 

Comments


  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. Anna says:

    Muchas gracias, justo lo que necesitaba!

  3. jesus says:

    Buenas podrias adjuntar el codigo completo

  4. Roos says:

    Que barbaro, muchas gracias por el ejemplo, justo lo que necesitaba 🙂

  5. Llevaba mucho tiempo buscando esto, y lo muestras tan sencillo que hasta duele. xD jejeje
    Muchas gracias. 🙂

  6. William257 says:

    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.

  7. Dionny says:

    Usted es el mejor.. Gracias por el codigo.

  8. Roberto says:

    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

  9. Lenis says:

    Habia probado con varios códigos y ninguno me resolvía el problema, este me funcionó a la perfección gracias.

  10. leonel says:

    como haría para tener activo el menú y el submenu?

  11. leonel says:

    like!!!

  12. agradezco si me pueden ayudar

  13. me funciona perfecto cuando estoy en la ventana principal, pero cuando cambio de ventana se regresa al inicio… estoy trabajando con KUMBIA

  14. José Manuel says:

    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!

  15. E,m,i says:

    grosooooo

  16. daniel says:

    buen codigo, gracias por publicarlo, tenia uno pero lo perdi, pero este cumple eficientemente

  17. Lalo Aldana says:

    muchas gracias de verdad me ayudaste bastante saludooos desde leon gto mexico

  18. espectacular. Gran labor compañero

  19. Rodrigo says:

    Muchas gracias, tras muchas pruebas en otros foros, y sin éxito, este código me funciono a la perfección .

  20. facer says:

    Excelente, muchas gracias por la info, he estado buscando hacer esto desde hace rato.

Leave a Reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *