Básicamente, tengo 2 divs en mi página HTML y estoy tratando de crear una función para alternar entre los dos, usando los botones en mi HTML. Un botón sería para alternar a div 2, y el otro sería para volver a alternar a div 1, al igual que el código a continuación:
<button id="toggle-to-2">Toggle to div 2</button> <button id="toggle-to-1">Toggle to div 1</button> <div id="div-1"> This is div 1 </div> <div id="div2"> This is div 2 </div>Además, al usar CSS, ¿cómo debo colocarlos? ¿Debería darles la misma posición y confiar en la función para alternar entre los dos?
Esto es un poco primitivo, pero hace lo que quieres que haga, hice todo lo posible para implementar la mejor estrategia para este comportamiento de alternancia que es tedioso en Vanilla JS en comparación con algo como React.
const toggleTo2 = document.getElementById("toggle-to-2"); const toggleTo1 = document.getElementById("toggle-to-1"); const div1 = document.getElementById("div-1"); const div2 = document.getElementById("div2"); const hide = el => el.style.setProperty("display", "none"); const show = el => el.style.setProperty("display", "block"); hide(div2); hide(toggleTo1); toggleTo2.addEventListener("click", () => { hide(div1); hide(toggleTo2); show(toggleTo1); show(div2); }); toggleTo1.addEventListener("click", () => { hide(div2); hide(toggleTo1); show(toggleTo2); show(div1); }); <button id="toggle-to-2">Toggle to div 2</button> <button id="toggle-to-1">Toggle to div 1</button> <div id="div-1"> This is div 1 </div> <div id="div2"> This is div 2 </div>En cuanto a CSS, depende de usted, pero si alternan, asumiría que les da el mismo posicionamiento.