Estoy usando bootstrap con btn-group . Ahí está el html:
<div class="btn-group btn-group-sm" role="group"> <div type="button" class="btn btn-default btn-1">Button 1</div> <div type="button" class="btn btn-default btn-2 active">Button 2</div> </div>El botón 2 ya está activo.
Actualmente estoy haciendo esto para eliminar la clase activa de una y agregarla a otra.
$('.btn-2').removeClass('active'); $('.btn-1').addClass('active');¿Es esta la forma más limpia de hacer esto o hay una mejor manera para que pueda alternar esta clase activa entre los dos botones?
Usar:
$('.btn-group').on('click', '.btn', function() { $(this).addClass('active').siblings().removeClass('active'); });¿Creo que el código se explica por sí mismo? Simplemente elimina cualquier clase "activa" existente de los hermanos del botón en el que hizo clic y agrega esa clase al botón en el que hizo clic.
Aquí hay un fragmento de trabajo:
$('.btn-group').on('click', '.btn', function() { $(this).addClass('active').siblings().removeClass('active'); }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> <div class="btn-group btn-group-sm" role="group"> <div type="button" class="btn btn-default btn-1">Button 1</div> <div type="button" class="btn btn-default btn-2 active">Button 2</div> </div>