En mi proyecto tengo una página donde hay diferentes directorios dentro de otros directorios, que se muestran y se ocultan con "style.display="block/none", el problema es que no encuentro cómo guardar esos estados en una URL para que puedan ser enviado a otros.
Idealmente, después de que el usuario haga clic en el botón "Mostrar sección 1", y luego en "Mostrar sección 11", la URL se convierte en website.com/section1/section11 que puede compartir con otros.
Entonces, la pregunta es, ¿cómo guardo los estados de los sitios web para compartirlos según el lugar del directorio en el que se encuentra el usuario?
Código de ejemplo:
JS
const Section1 = document.getElementById("section1"); const Section2 = document.getElementById("section2"); const Section11 = document.getElementById("section1-1"); const Section12 = document.getElementById("section1-2"); function show1(){ Section1.style.display="block"; Section2.style.display="none"; } function show2(){ Section1.style.display="none"; Section2.style.display="block"; } function show11(){ Section11.style.display="block"; Section12.style.display="none"; } function show12(){ Section11.style.display="none"; Section12.style.display="block"; } And so on...HTML
<button onclick="show1()">Show Section 1</button> <button onclick="show2()">Show Section 2</button> <div id="section1" style="display: block"> <button onclick="show11()">Show Section 11</button> <button onclick="show12()">Show Section 12</button> <div id="section1-1" style="display: block"> <p>Some text</p> <button onclick="show111()">Show Section 111</button> <button onclick="show112()">Show Section 112</button> </div> <div id="section1-2" style="display: none"> <p>Some text</p> <button onclick="show121()">Show Section 121</button> <button onclick="show122()">Show Section 122</button> </div> </div> <div id="section2" style="display: none"> <p>Something in here...</p> </div>Puedes intentar algo como esto:
var url = "" function show(target) { $(target).siblings("[id^=section]").hide(); $(target).show(); generateUrl(); } function generateUrl() { url = "/"; url += $("[id^=section]:visible").map(function() { return $(this).attr("id") }).get().join("/"); console.log(url) }Como etiquetó jquery, pensé en proporcionarle un ejemplo con menos código. Trabajaré correctamente una vez que su html esté completo.
Pero en general, genera la URL en función de los div donde la identificación comienza con la section y es visible.
Manifestación
var url = "" function show(target) { $(target).siblings("[id^=section]").hide(); $(target).show(); generateUrl(); } function generateUrl() { url = "/"; url += $("[id^=section]:visible").map(function() { return $(this).attr("id") }).get().join("/"); console.log(url) } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <button onclick="show('#section1')">Show Section 1</button> <button onclick="show('#section2')">Show Section 2</button> <div id="section1" style="display: block"> <button onclick="show('#section1-1')">Show Section 11</button> <button onclick="show('#section1-2')">Show Section 12</button> <div id="section1-1" style="display: block"> <p>Some text</p> <button onclick="show('#section1-1-1')">Show Section 111</button> <button onclick="show('#section1-1-2')">Show Section 112</button> </div> <div id="section1-2" style="display: none"> <p>Some text</p> <button onclick="show('#section1-2-1')">Show Section 121</button> <button onclick="show('#section1-2-2')">Show Section 122</button> </div> </div> <div id="section2" style="display: none"> <p>Something in here...</p> </div>