0
156
VistasLa clase activa jQuery no se elimina cuando se hace clic en otro botón
Tengo dos botones html que muestran información diferente cuando se hace clic. Estoy usando jQuery para cambiar qué botón tiene el botón CSS predeterminado y el botón CSS activo. Mi código está abajo. Actualmente, cuando hago clic en el botón opuesto, el botón activo predeterminado no cambia a estilos inactivos. ¿Alguna sugerencia? ¡Gracias por adelantado!
HTML:
<div class="center-buttons container space-between btn-group"> <button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button> <button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>jQuery:
$('.btn-group').on('click', 'button', function(){ $('.btn-group button.active-2').removeClass('active-2'); $(this).addClass('active-2');CSS:
.center-buttons { text-align: center; margin: 20px 0px; } .container { display: flex; } .space-between { justify-content: space-between; } .mobile-buttons { margin: 5px; border: none; border-bottom: 3px solid #B0B0B0; color: #B0B0B0; font-weight: 700; font-size: 12px; } .active-2, .mobile-buttons:hover { background-color: #fff; border-bottom: 3px solid #2d2d2d; color: #2d2d2d; } .desktop-w { width: 49%; }
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Parece que hay un error de sintaxis en el código jQuery. La aplicación se ejecuta cuando el método del controlador de eventos termina con "})".
/* The event handler method is not terminated with "})". */ $('.btn-group').on('click', 'button', function(){ $('.btn-group button.active-2').removeClass('active-2'); $(this).addClass('active-2'); }); .center-buttons { text-align: center; margin: 20px 0px; } .container { display: flex; } .space-between { justify-content: space-between; } .mobile-buttons { margin: 5px; border: none; border-bottom: 3px solid #B0B0B0; color: #B0B0B0; font-weight: 700; font-size: 12px; } .active-2, .mobile-buttons:hover { background-color: #fff; border-bottom: 3px solid #2d2d2d; color: #2d2d2d; } .desktop-w { width: 49%; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="center-buttons container space-between btn-group"> <button type="button" id="xValues" class="mobile-buttons desktop-w active-2">Button 1</button> <button type="button" id="yValues" class="mobile-buttons desktop-w">Button 2</button></div>
·
Juan Pablo Isaza
Denunciar
Responde la pregunta