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>
li
?, asi podrias hacerlo corto después el cambio.