Estoy haciendo un sistema de usuarios y en el panel de usuario quiero que me muestre divs dependiendo a la url, Ejemplo: pagina.com/usuario.php#div1
me muestre el div1 con sus datos, y si ingresa pagina.com/usuario.php#div2
oculte el div1 y muestre el div2, de antemano muchas gracias!
-
1Bienvenido, te invito a que hagas el recorrido para conocer más acerca del sitio y de paso ganes tu ¡Primer medalla!, Así mismo lee Cómo preguntar y ejemplo mínimo verificable para que tus preguntas sean mejor recibidas por la comunidad. – Vick Muñoz el 9 ene. 20 a las 2:52
2 respuestas
Con PHP no es posible hacerlo ya que este no recibe el hash de la url en ninguna de sus variables, con javascript puedes tener algo como:
<div id="div1" style="display:none">
Soy el div 1
</div>
<div id="div2" style="display:none">
Soy el div 2
</div>
<script>
var divId = window.location.hash.substr(1);
document.getElementById(divId).style.display = '';
</script>
Con su respectivo control de errores ya que no siempre tendrá un hash que evaluar. Pero ya que estás con PHP creo que hay formas más simples de hacer que te muestre una porción de tu formulario según variables enviadas desde frontend, por ejemplo, haciendo uso de variables GET en vez de usar el HASH pagina.com/usuario.php?mostrar=div1
usar una url con # no es la mejor forma de hacerlo, deberías hacerlo con un parametro get quedando así:
pagina.com/usuario.php?div=1 y pagina.com/usuario.php?div=2
entonces puedes obtener el valor del parámetro get usando javascript, te dejo un ejemplo:
window.onload = function WindowLoad(event) {
let params = new URLSearchParams(document.location.search.substring(1));
let numeroDiv = params.get('div'); //en la variable numeroDiv quedará el valor asignado en la URL
mostrarDiv(numeroDiv);
}
//Esta función recibe el numero del div que se va a mostrar
var mostrarDiv = function(numeroDiv) {
if(numeroDiv==1) {
document.getElementById("div1").style.display = "block";
document.getElementById("div2").style.display = "none";
} else {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "block";
}
}
Espero te sirva