Hola...
Necesito tener una parte de mi página, específicamente una tabla, oculta. Y un botón o una imagen que al usuario dar click se muestre.
gracias
| |||
Te hice un ejemplo a ver si te sirve. Funciona tanto para mostrar como para ocultar. Podés probar como variante usar la propiedad display en vez de visibility (visibility te mantiene el espacio que ocupa la tabla, display no). Saludos, espero te sirva
Código:
<html> <head> <script language="Javascript"> function mostrar() { var unaTabla, mostrar; unaTabla = document.getElementById("unaTabla"); if(unaTabla.style.visibility == "hidden") { unaTabla.style.visibility = "visible"; mostrar = document.getElementById("mostrar").childNodes[0]; mostrar.data = "Ocultar"; } else { unaTabla.style.visibility = "hidden"; mostrar = document.getElementById("mostrar").childNodes[0]; mostrar.data = "Mostrar"; } } </script> </head> <body> <table border="1" id="unaTabla" style="visibility: hidden;"> <tr> <td>Nombre</td><td>Apellido</td> </tr> <tr> <td>Juan</td><td>Pérez</td> </tr> <tr> <td>Mariana</td><td>Fernández</td> </tr> <tr> <td>Claudio</td><td>Rodríguez</td> </tr> </table> <a id="mostrar" href="javascript:mostrar();">Mostrar</a> </body> </html> |
| |||
|
| |||
|
| ||||
Vámonos a Javascript
__________________ Cómo escribir No hay pregunta tonta, sino tonto que quiere seguir en la ignorancia. |
| |||
Gracias, ya funciona! He intentado hacer uno por mi cuenta y no me funciona, alguien sabe en que me he equivocado??? ---------------------------------------- <html> <head> <script language="Javascript"> function mostrar() { var layer1, mostrar; layer1 = document.getElementById("layer1"); if(layer1.style.visibility == "hidden") { layer1.style.visibility = "visible"; mostrar = document.getElementById("mostrar").childNodes[0]; mostrar.data = "Ocultar"; } else { layer1.style.visibility = "hidden"; mostrar = document.getElementById("mostrar").childNodes[0]; mostrar.data = "Mostrar"; } } </script> </head> <body> <div id="Layer1" style="position:absolute; width:200px; height:115px; z-index:2; background-color: #0033FF; layer-background-color: #0033FF; border: 1px none #000000; left: 44px; top: 22px; color: #FFFFFF; visibility: hidden;">un poquito de porfavor </div> <div id="Layer2" style="position:absolute; width:173px; height:160px; z-index:3; left: 458px; top: 23px; background-color: #990000; layer-background-color: #990000; border: 1px none #000000; visibility: visible;"><a id="mostrar" href="javascript:mostrar();"><img src="mis%20cosillas/Nota.png"></a></div> </body> </html> ----------------------------- Última edición por ratcarlos; 22/02/2005 a las 04:45 |
| |||
Respuesta: div oculto y mostrado aca encontre esto: Para mostrar y ocultar un div debemos instanciar un div con un ID único y en el estilo incluir style=”display:none;” por ejemplo: <div id=”flotante” style=”display:none;”> </div> Luego debemos realizar dos funciones en javascript para mostrar y ocultar dicho div respectivamente. <script> function mostrardiv() { div = document.getElementById('flotante'); div.style.display =''; } function cerrar() { div = document.getElementById('flotante'); div.style.display='none'; } </script> Una vez hecho esto, tenemos las funciones en javascript que mostrarán y ocultarán el div cuando el usuario haga click en una imagen o un texto con el link a la función, como en el siguiente ejemplo: <div id=”mostrarDiv”><a href=”javascript:mostrardiv();”>Mostrar Div</a></div> <div id=”flotante” style=”display:none;”> Este es un div oculto <br><a href=”javascript:cerrar();”> presiona aquí para cerrar</a> </div> |