Esto lo aprendí hace un par de semanas [No creo que sea algo nuevo...pero nunca es tarde]. En realidad lo consegui haciendo ejercicios, pero da igual. Me sirvio para ocultar una capa [Div] en donde coloque unas tablas. Así el usuario podia ver estas tablas y volverlas a ocultar cuando haya finalizado la lectura. Si trabajamos una página hecha completamente en HTML donde creamos una nueva pagina para un nuevo articulo y, en alguna ocasión queremos agregar poco material y no deseamos hacerlo en una nueva pagina para "ahorrar" , sirve.
Lo primero será copiar el siguiente código antes de la etiqueta en nuestro archivo HTML:Notarán que remarque en letra negrita contenido-oculta. Eso es el nombre de la capa que deseamos ocultar, asi que si la que ustedes quieren ocultar y mostrar se llama Capa-1, pues solo reemplazan esas dos cosas en el código.Código HTML:function mostrar() { div = document.getElementById('[b]contenido-oculta[/b]'); div.style.display = ""; } function cerrar() { div = document.getElementById('[b]contenido-oculta[/b]'); div.style.display='none'; }
Solo resta crear la capa y agregar la funcion para llamar a ese JS y lograr que funcione la acción.
Ah, solo funciona con capas únicas. No con capas a la que se le aplique una clase. Por lo tanto esta debe estar creada en la hoja de estilos como capa única [Anteponiendo la almohadilla # al nombre de esta]
Si estan trabajando con Dreamweaver, Frontpage o algun otro editor HTML que tenga la opción WYSIWYG deben quitar del código lo que remarque en letra cursiva mas arriba: style="display:none; y volverlo a agregar una vez que hayan finalizado. De lo contrario no van a tener vista previa de esa capa por llevar el estilo Display:none [Capa oculta]Código HTML:"javascript:mostrar();">Click aquí para MOSTRAR el texto oculto"contenido-oculta" [i]style="display:none;[/i]"> [u]Acá el contenido que queremos mostrar u ocultar[/u] "javascript:cerrar();">Click aquí para CERRAR la capa
Mientras el código quede tal cual les muestro acá , pueden editar lo que dice Click aquí para...y dejarlo a gusto.
Saludos ^^
Nota: Borren los códigos & y & del código JS para que funcione correctamente.
Click AQUI para ver un ejemplo
NOTICIAS RELACIONADAS
Cómo utilizar DuckDuckGo en una línea de comandos Linux
01 Dec 20170¿Privacidad? Si la buscas y aún no has probado DuckDuckGo, este artículo te va a interesar. Vamo...Read more »
¿Qué son las llaves U2F y cómo protegen nuestra seguridad?
01 Dec 20170Durante años, las medidas de seguridad más extendidas para proteger nuestro ordenador y nuestras...Read more »
Se cumplen 25 años del primer SMS, la tecnología que lo cambió todo
01 Dec 20172Sin duda, una de las tecnologías que ha transformado la forma de comunicación entre los seres hum...Read more »
La Policía actualiza los DNIe inseguros, ya puedes renovar los certificados
01 Dec 20170La Dirección General de la Policía tuvo que tomar medidas por la seguridad de los ...Read more »
Encuentra puntos de acceso fiables cerca de ti con Avast Wi-Fi Finder
20 Aug 20170Aunque hoy en día casi todos tenemos una tarifa de datos 3G/4G desde la que conectarnos a Intern...Read more »
Suscribirse a:
Enviar comentarios (Atom)
0 comentarios:
Publicar un comentario
Click to see the code!
To insert emoticon you must added at least one space before the code.