Soy bastante nuevo en jQuery y tengo el siguiente problema. Entonces, quiero que jQuery escuche cuando el usuario hace clic en el elemento li y si el elemento ya tiene una clase de active, debería regresar de la función. Si un elemento no tiene una clase de active, debería agregarle una clase. Entonces, lo que quiero es agregar clase cuando se hace clic en el elemento, pero solo un elemento a la vez puede tener la clase de active. Pero en este momento, mi código está agregando la clase active a cada elemento en el que hago clic. Abajo está el código:

<div class="container-fluid">
    <div class="col-sm-2">
        <ul class="nav nav-pills nav-stacked">
            <h3>Lists</h3>
            <hr class="divider">
            <li><a href="#"><span class="glyphicon glyphicon-briefcase"></span> Work</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-plane"></span> Travel</a></li>
            <li><a href="#"><span class="glyphicon glyphicon-book"></span> School</a></li>
        </ul>
    </div>
</div>

</div>

<script>
    (function () {

        $('.nav').children('li').on('click', function () {
            $this = $(this);

            if ( $this.hasClass('active') ) {
                return 0;
            } else {
                $this.addClass('active');
            }

        });

    })();
</script>
0
Blaz Kranjcev 2 sep. 2014 a las 21:48

4 respuestas

La mejor respuesta

Prueba esto

    $(function(){
        $('.nav li').click(function () {
             $('.nav li').removeClass("active");    
             $(this).addClass("active");    
        });
   });
2
kefy 2 sep. 2014 a las 17:51

Puedes hacer algo como esto, por ejemplo:

(function () {
     $('.nav').on('click', 'li', function () {
         $(this).toggleClass('active')
             .siblings('li').removeClass('active');
     });

 })();

this dentro del controlador de eventos se refiere solo al elemento DOM en el que se activó el evento (a li que se hizo clic en nuestro caso). Si inicia sesión this dentro de su función de devolución de llamada, verá que se refiere solo al elemento li (en el que se hace clic):

 (function () {
        $('.nav').children('li').on('click', function () {
            console.log(this); //logs <li class="active"> </li>
            //other code
    })();
1
Elena 2 sep. 2014 a las 18:12

Básicamente agregamos clase y eliminamos clase de todos los hermanos.

(function () 
{
    $('.nav').on('click', 'li', function() 
    {
        $(this).addClass('active')
               .siblings('li')
               .removeClass('active');
    });
})();
0
FrEaKmAn 2 sep. 2014 a las 18:11

Pruébalo así:

$('.nav').children('li').on('click', function () {
   $('.nav').children('li').removeClass('active');
   $(this).addClass('active');

});
1
Jay Blanchard 2 sep. 2014 a las 17:52