Ejemplo jQuery: menú activo al hacer click

logo jQuery

Ejemplo de código fuente con jQuery que consiste en indicar el menú activo en el que hemos hecho click, para saber en qué sección nos encontramos en la web actualmente, ya que al hacer click en cada link del menú, nos coloreará que estamos en ese apartado.

 

 

Descripción del ejemplo

Lo que haremos es crear una clase en css para que nos subraye y cambie de color ese link en el que hemos hecho click, y después mediante jQuery con removeClass() eliminaremos la clase que tenga asignada ese menú, y con addClass() le añadiremos la clase para activar ese menú.

 

Código

Código CSS

Éste sería el código para el css:

.activo {
    text-decoration: underline;
	background-color: red;
}
ul {
    list-style-type: none;
}
a {
    text-decoration: none;
}

 

Código Javascript

Éste sería el código para el javascript:

$('#menu li a').on('click', function(){
    $('li a.activo').removeClass('activo');
    $(this).addClass('activo');
});

 

Código HTML

Este sería el código del HTML, por supuesto incluyendo la librería jQuery previamente en el <head>…</head>

<div id="menu">
<ul>
<li><a id="inicio" class="activo" href="#inicio">INICIO</a></li>
<li><a id="menu1" href="#menu1">MENU 1</a></li>
<li><a id="menu2" href="#menu2">MENU 2</a></li>
<li><a id="contacto" href="#contacto">CONTACTO</a></li>
<li><a id="acercade" href="#acercade">ACERCA DE</a></li>
</ul>
</div>

 

Demo del ejemplo

VER DEMO

 

 

Valoración General

[Valoraciones:  2    Promedio:  4.5 de 5]