[SOLUCIONADO] Botón activo de menú con click

[agustinpak]

Buenas Gente! No puedo dejar activo el menú! Sucede que como no cambio de pagina, recargo todo en la misma, no se como dejar el botón seleccionado activo. Intente así pero no me sale. Alguien ve el error? Gracias!

Código CSS:

#menu li.activa {
  background-image: url(../../imagenes/pest_activa.png);
}
 

Código HTML:

<script>
            $(document).ready(function(){
      
                $('#inicio').click(function(){
                        $('#inicio').removeClass("li.activa");
                        $(this).addClass("li.activa");
                        });      
      
                $('#redes').click(function(){
                        $('#redes').removeClass("li.activa");
                        $(this).addClass("li.activa");
                        }); 
 
                $('#quienes_somos').click(function(){
                        $('#quienes_somos').removeClass("li.activa");
                        $(this).addClass("li.activa");
                        }); 
 
                $('#contacto').click(function(){
                        $('#contacto').removeClass("li.activa");
                        $(this).addClass("li.activa");
                        }); 
                                        });
        </script>  
 
<div id="posmenu">
    <ul id="menu">
      <li><a href="#" id="inicio">Inicio</a></li>
      <li><a href="#" id="redes">Redes</a></li>
      <li><a href="#" id="quienes_somos">Quienes Somos?</a></li>
      <li><a href="#" id="contacto">Contacto</a></li>
    </ul>
    </div>
 

[Ito79]

Hola,
El problema es que estás aplicando estilos a los elementos LI mediante jQuery y CSS pero luego en el HTML tienes los IDs aplicados a los elementos <A>.

Lo que aconsejo que hagas:
1. Pon los ID a los elementos LI, por ejemplo:

Código HTML:

<li id="inicio"><a href="#" >Inicio</a></li>
 

2. En el jQuery no tienes que especificar LI, sólo el nombre de la clase, por ejemplo:

Código Javascript:

$('#inicio').click(function(){
                        $('#inicio').removeClass("activa");
                        $(this).addClass("activa");
                        });
 

Con eso te funcionará.

Espero que ayude,
Un saludo

// Ito

[agustinpak]

Hola @Ito79! Gracias por tu ayuda! Quedo funcionando!!

Lo que si, tuve que modificarlo porque de esa manera me dejaba todos los botones activos porque en la función, nunca desactivaba la clase de los otros botones, sino del mismo que clickeaba.

Muchas gracias nuevamente!! Saludos!!

Código Javascript:

<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
        <script>
            $(document).ready(function(){
      
                $('#inicio').click(function(){
                        $('#redes').removeClass("activa");
                        $('#quienes_somos').removeClass("activa");
                        $('#contacto').removeClass("activa");
                        $(this).addClass("activa");
                                             });      
      
                $('#redes').click(function(){
                        $('#inicio').removeClass("activa");
                        $('#quienes_somos').removeClass("activa");
                        $('#contacto').removeClass("activa");
                        $(this).addClass("activa");
                                             });
 
                $('#quienes_somos').click(function(){
                        $('#redes').removeClass("activa");
                        $('#inicio').removeClass("activa");
                        $('#contacto').removeClass("activa");
                        $(this).addClass("activa");;
                                             });
 
                $('#contacto').click(function(){
                        $('#redes').removeClass("activa");
                        $('#quienes_somos').removeClass("activa");
                        $('#inicio').removeClass("activa");
                        $(this).addClass("activa");
                                             });
                                        });
        </script>
 

Saludos!!

[Ito79]

Me alegro que te haya funcionado, es cierto, había que completarlo :)

Un saludo
Ito