Mostrar u Ocultar una capa en HTML usando JavaScript - Electronik-Pro, Informatica, Noticas,Wordpress,Facebook,Hacking,Programas,Hosting,Dominios

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:
Código 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.

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]

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
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]

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

0 comentarios:

Publicar un comentario

 
Top