1

saludos.

He echo una pequen lista, la cual deseo agregar un efecto tipo :focus de seleccion con un background, se lo doy a través de una clase is-active. la finalidad es que cuando pulse otro elemento, elimine la clase del que la tenia y la agregue al nuevo, lo e echo con JQUERY pero me parece que debe haber alguna solución mas funcional o mejor escrita.

Agradezco posibles soluciones para acortar el código y expandir mis conocimientos. <3

$(function(){
    $('.one-a').on('click', function(){
        $('.one-a').addClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-b').on('click', function(){
        $('.one-b').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-c').on('click', function(){
        $('.one-c').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-d').on('click', function(){
        $('.one-d').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-e').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-e').on('click', function(){
        $('.one-e').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-f').removeClass('is-active');
    });
    $('.one-f').on('click', function(){
        $('.one-f').addClass('is-active');
        $('.one-a').removeClass('is-active');
        $('.one-b').removeClass('is-active');
        $('.one-c').removeClass('is-active');
        $('.one-d').removeClass('is-active');
        $('.one-e').removeClass('is-active');
    });
});
.is-active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one-a is-active"><a>item a</a></li>
    <li class="one-b"><a>item b</a></li>
    <li class="one-c"><a>item c</a></li>
    <li class="one-d"><a>item d</a></li>
    <li class="one-e"><a>item e</a></li>
    <li class="one-f"><a>item f</a></li>
  </ul>
</div>

1
  • por que no dejas la misma clase? para el elemento li?, asi podrias hacerlo corto después el cambio. Commented el 25 may. 2018 a las 17:49

2 respuestas 2

3

Lo puedes hacer mucho mas sencillo asi:

$(function(){
    $('li').on('click', function(){
       $(".is-active").removeClass("is-active");
       $(this).addClass("is-active");
    });
});
.is-active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one-a is-active"><a>item a</a></li>
    <li class="one-b"><a>item b</a></li>
    <li class="one-c"><a>item c</a></li>
    <li class="one-d"><a>item d</a></li>
    <li class="one-e"><a>item e</a></li>
    <li class="one-f"><a>item f</a></li>
  </ul>
</div>

2
  • super bien..... excellente, sabia que deberia de haber una mejor respuesta pero ni idea como, estoy empezando. :) gracias amigo!
    – Gabriela
    Commented el 25 may. 2018 a las 17:54
  • De nada Gabriela, para eso estamos
    – alanfcm
    Commented el 25 may. 2018 a las 17:54
2

Lo puedes hacer de la siguiente manera si tienes mas elementos li en la vista

$(".one").click(function(){
  
  $(this).addClass('is-active');
  $(this).siblings().removeClass('is-active');
  
});
.is-active {
  background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<div class="container">
  <ul>
    <li class="one is-active"><a>item a</a></li>
    <li class="one"><a>item b</a></li>
    <li class="one"><a>item c</a></li>
    <li class="one"><a>item d</a></li>
    <li class="one"><a>item e</a></li>
    <li class="one"><a>item f</a></li>
  </ul>
</div>

Lo que hace el código arriba es que al hacer click sobre si mismo, o sea la clase "one" , se agrega la clase is-active y después con la propiedad siblings de jquery selecciono los "hermanos" del elemento que están dentro de la etiqueta padre lu y les remuevo la clase "is-active"

2
  • gracias por la explicación también que funciona a la perfección, aprendiendo super, siblings agregada a mis practicas diarias.
    – Gabriela
    Commented el 25 may. 2018 a las 18:01
  • de nada @Gabriela toda ayuda siempre viene bien. Commented el 25 may. 2018 a las 18:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.