Lo que estoy tratando de hacer es, cuando presiono un botón, poner un borde alrededor para mostrarlo como activo. También estoy tratando de tener en JavaScript que el botón esté activo, pero aún no he llegado a eso. ¿Alguien puede ayudarme?
$('button').on('click', function() { $('button').removeClass('active_button'); $(this).addClass('active_button'); }); //Home button active on page load $(document).ready(function() { $('#Home').addClass('active_button'); }); .cable-choose { margin-bottom: 20px; } .cable-choose button { border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; } .cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus { border: 2px solid #000; outline: none; } .active_button { border: 2px solid black; } <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home">50 Entries<br>$5.00</button> <button>100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> </div>Solo necesita hacer que su selector de CSS sea más específico . Estaba siendo anulado por los estilos de botón estándar.
$('button').on('click', function() { $('button').removeClass('active_button'); $(this).addClass('active_button'); }); //Home button active on page load $(document).ready(function() { $('#Home').addClass('active_button'); }); .cable-choose { margin-bottom: 20px; } .cable-choose button { border: 2px solid #E1E8EE; border-radius: 6px; padding: 13px 20px; font-size: 14px; color: #5E6977; background-color: #fff; cursor: pointer; transition: all .5s; } .cable-choose button:hover, .cable-choose button:active, .cable-choose button:focus { border: 2px solid #000; outline: none; } .cable-choose button.active_button { /* <------------ RIGHT HERE */ border: 2px solid black; } <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <div class="cable-config"> <span>Select Entries</span> <div class="cable-choose"> <button id="Home">50 Entries<br>$5.00</button> <button>100 Entries<br>$10.00</button> <button>250 Entries<br>$25.00</button> <button>500 Entries<br>$50.00</button> </div> </div>Creo que está funcionando. Veo class="active_button" cuando inspecciono el botón en el que hice clic... Sin embargo, el estilo de su active_button es idéntico al de su estado de desplazamiento/enfoque/activo (uno se establece en #000 y el otro en "negro" - el mismo color)