Quiero mostrar el contenido div al hacer clic en el botón. Y hay 3 botones diferentes que siguen a 3 contenidos diferentes. Probé esta lógica e hizo que mi código fuera largo. ¿Cómo simplificar el código usando bucle o condición?
function replace1(){ document.getElementById("con1").style.visibility="visible"; document.getElementById("con2").style.visibility="hidden"; document.getElementById("con3").style.visibility="hidden"; document.getElementById("con4").style.visibility="hidden"; document.getElementById("con5").style.visibility="hidden"; document.getElementById("con6").style.visibility="hidden"; } function replace2(){ document.getElementById("con1").style.visibility="hidden"; document.getElementById("con2").style.visibility="visible"; document.getElementById("con3").style.visibility="hidden"; document.getElementById("con4").style.visibility="hidden"; document.getElementById("con5").style.visibility="hidden"; document.getElementById("con6").style.visibility="hidden"; } function replace3(){ document.getElementById("con1").style.visibility="hidden"; document.getElementById("con2").style.visibility="hidden"; document.getElementById("con3").style.visibility="visible"; document.getElementById("con4").style.visibility="hidden"; document.getElementById("con5").style.visibility="hidden"; document.getElementById("con6").style.visibility="hidden"; }Use una clase - agregue class="con" a cada elemento - también use oculto en lugar de visibilidad ya que los divs ocultos aún ocuparán espacio
const toggle = id => cons .forEach(con => con.hidden = con.id !== id);Aquí hay una versión que también cambiará el color del botón.
Deberá usar hidden o display:none para que los divs permanezcan en un solo lugar
window.addEventListener('DOMContentLoaded', function() { const cons = document.querySelectorAll('.con'); const buts = document.querySelectorAll('.toggle'); const toggle = id => cons .forEach(con => con.hidden = con.id !== id); document.getElementById('nav').addEventListener('click', function(e) { const tgt = e.target.closest('button'); if (tgt.classList.contains('toggle')) { toggle(tgt.dataset.id) buts.forEach(but => but.classList.remove('active')); tgt.classList.add('active'); } }) }) .active { background-color: green; } <nav id="nav"> <button type="button" class="toggle" data-id="con1">Con 1</button> <button type="button" class="toggle" data-id="con2">Con 2</button> <button type="button" class="toggle" data-id="con3">Con 3</button> </nav> <div id="con1" class="con" hidden> <h1>Con 1</h1> </div> <div id="con2" class="con"hidden> <h1>Con 2</h1> </div> <div id="con3" class="con" hidden> <h1>Con 3</h1> </div>.active-button { background: red; } <button class="replace-button" onclick="replace(1, this)"></button> <button class="replace-button" onclick="replace(2, this)"></button> <button class="replace-button" onclick="replace(3, this)"></button> function replace(visibleIndex, _this) { const buttons = document.querySelectorAll('.replace-button'); buttons.forEach(button => button.classList.remove("active-button")); _this.classList.add("active-button"); for(let i = 1; i < 7; i++) { let element = document.getElementById("con" + i) i === visibleIndex ? element.style.visibility = "visible" : element.style.visibility = "hidden"; } }