jQuery add y remove Class

[opzina2]

Hola,

Necesito que al hacer click en un enlace agregue una clase al H2 respectivo sin que afecte al resto.

Código Javascript:

<script type="text/javascript">
        $(document).ready(function() {
            $(".navinside").click(function() {
                $(this).next().addClass("active");
                return false;
            }).next().removeClass("active");
        });
    </script>
 

Código HTML:

<aside id="sidebar_inside" class="left">
            <ul>
                <li><h2 class="navinside"><a href="#">CIRCULARES</a></h2></li>
                <li><h2 class="navinside"><a href="#">HISTORIA</a></h2></li>
                <li><h2 class="navinside"><a href="#">COMISI&Oacute;N DIRECTIVA</a></h2></li>
                <li><h2 class="navinside"><a href="#">ESTATUTO</a></h2></li>
            </ul>
        </aside>
 

[MarioAraque]

Proba esto:

Código Javascript:

<script type="text/javascript">
 $(document).ready(function() {
        $(".navinside").each(function() {
         $(this).click(function() {
         $(this).next().addClass("active");
             return false;
     }).next().removeClass("active");
        }
 });
 </script>
 

[opzina2]

No funciona.

[ryugen]

Código Javascript:

<script type="text/javascript">
$(document).ready(function() {
            $(".navinside").click(function(event) { $(this).toggleClass('active'); event.preventDefault();});
        });
 </script>
 

[opzina2]

Creo que no me expliqué bien.

Cuando hago click en <li><h2 class="navinside"><a href="#">CIRCULARES</a></h2></li>

Y se accede a la sección "CIRCULARES" el h2 correspondiente a circulares tiene que quedar con la clase "active" y SIN la clase active el resto de los enlaces.

[ryugen]

Código Javascript:

$(document).ready(function() {
            $(".navinside a").removeClass('active').each(function (){
                             var href = $(this).attr('href');
                             if(window.location.href.indexOf(href) !== -1){
                                          $(this).addClass('active');
                             }
             });
});
 

Para que funcione eso deberias actualizar tus linlks de la siguiente forma:

Código HTML:

<aside id="sidebar_inside" class="left">
            <ul>
                <li><h2 class="navinside"><a href="#circulares">CIRCULARES</a></h2></li>
                <li><h2 class="navinside"><a href="#historia">HISTORIA</a></h2></li>
                <li><h2 class="navinside"><a href="#comision">COMISI&Oacute;N DIRECTIVA</a></h2></li>
                <li><h2 class="navinside"><a href="#estatuto">ESTATUTO</a></h2></li>
            </ul>
        </aside>
 

O bien

Código Javascript:

$(document).ready(function() {
            $(".navinside").click(function (){
                             $(".navinside").removeClass('active');
                             $(this).addClass('active');
             });
});
 

[opzina2]

Esto es lo que necesitaba. Muchas Gracias,

Ahora tengo la siguiente duda: Cuando haga click en el enlace y se carga la nueva seccion la clase "ACTIVE" va a desaparecer. ¿Cómo hago para que quede ACTIVE para ese enlace?

Código Javascript:

$(document).ready(function() {
            $(".navinside").click(function (){
                             $(".navinside").removeClass('active');
                             $(this).addClass('active');
             });
});
 

[ryugen]

con algo parecido al primer codigo

Código Javascript:

$(document).ready(function() {
            $(".navinside").removeClass('active')
            $(".navinside a").each(function (){
                             var href = $(this).attr('href');
                             if(window.location.href.indexOf(href) !== -1){
                                          $(this).parent().addClass('active');
                             }
             });
});
 

Lo que hace ese código al cargarse la pagina, borra cualquier active que alla, luego recorre todos los links de navegacion y verifica cual esta cargado y setea ese como active.

Espero que te sirva

[opzina2]

Gracias. Excelente, funciona de maravilla.

Javascript y jQuery son una deuda pendiente ya empecé a leer y a hacer cosas bàsicas aunque no logro entender algunas cosas todavìa.

Saludos.