Quiero simular lo que hay en esta página donde un usuario puede hacer clic en a etiqueta y pasar de un div con texto a otro.
Vi algunas cosas con ocultar/mostrar un div en particular, pero esta página en particular parece usar un enlace href a #next
<div class="demo__instructions" data-step="1"> .... <a href="#next" role="step" data-next="">Customize the phone menu</a> </div>¿Cómo se simula esto?
El siguiente paso se activa en todos los enlaces que tienen el valor href como #next .
Entonces, cada vez que se hace clic en un enlace con href="#next" se ejecutará una función que llevará al siguiente paso, igual que simplemente ocultar y mostrar.
let nextBtn = document.querySelectorAll("a[href='#next']") let stepRunning = 1; for (let i = 0; i < nextBtn.length; i++) { nextBtn[i].addEventListener('click', nextBtnFunc) } function nextBtnFunc() { stepRunning++; document.querySelector("[data-step='" + stepRunning + "']").style.display = "block"; document.querySelector("[data-step='" + (stepRunning - 1) + "']").style.display = "none"; } .demo__instructions:not([data-step="1"]) { display: none; } <a href="#next" role="step" data-next="">Next</a> <div> <div class="demo__instructions" data-step="1"> <p>Step 1</p> <a href="#next" role="step" data-next="">Customize the phone menu</a> </div> <div class="demo__instructions" data-step="2"> <p>Step 2</p> <a href="#next" role="step" data-next="">phone menu</a> </div> <div class="demo__instructions" data-step="3"> <p>Step 3</p> <a href="#next" role="step" data-next="">menu</a> </div> <div class="demo__instructions" data-step="4"> <p>Step 4</p> </div> </div>