Tengo el siguiente problema a mano: cree dos botones que mostrarán/ocultarán el contenido correspondiente debajo. Lo logré usando este código:
$(document).ready(function() { $("#button2").click(function() { $(".content1").hide(); $(".content2").show(); }); $("#button1").click(function() { $(".content1").show(); $(".content2").hide(); }); }); .content1 { display: none; } .frequency { display: flex; } .frequency button { border: 2px solid red; padding: 25px 20px; } .frequency>button:hover, .frequency>button.active { background-color: red; color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="frequency"> <button id="button1">button1text</button> <button id="button2">button2text</button> </div> <div class="content1">text1</div> <div class="content2">text2</div>Para llevar esto un paso más allá, me gustaría que el último botón en el que se hizo clic permanezca resaltado (rojo). Intenté jugar con addClass, pero el código se volvió muy complicado.
¿Alguna sugerencia?
en caso de que se agreguen más botones en el futuro, puede usar esta solución, funcionará para múltiples contenidos sin editar su script.
simplemente vincule su botón con el atributo content-index luego este índice con su pestaña usando el atributo index
$(document).ready(function() { $('.toggle-content').click(function() { // get selected tab index const contentIndex = $(this).attr('content-index') // remove active class from content $('.content').removeClass('active') // add active class to selcted content $('[index=' + contentIndex + ']').addClass('active') // remove active class from all buttons $('.toggle-content').removeClass('active') // add active class to selcted button $(this).addClass('active') }) }); .content { display: none; } .content.active { display: block; } .frequency { display: flex; gap: 10px } .frequency button { border: 2px solid red; padding: 25px 20px; } .frequency>button:hover, .frequency>button.active { background-color: red; color: white; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="frequency"> <button class='toggle-content' content-index='1'>button1text</button> <button class='toggle-content active' content-index='2'>button2text</button> <button class='toggle-content' content-index='3'>button3text</button> </div> <div class="content" index='1'>text1</div> <div class="content active" index='2'>text2</div> <div class="content" index='3'>text3</div>