Como sabemos JQuery esta siendo muy utilizado en Internet para facilitar el funcionamiento por parte del cliente en los sitios web.
Aquí les presentamos una manera de utilizar JQuery, en este caso Mostrando y Ocultando un div o una capa:
Primero que nada debemos de descargar JQuery desde su sitio oficial y lo agregamos a la caperta donde deseemos trabajar, yo la mayor parte del tiempo lo tengo en una carpeta llamada “js”, ya sea para tener un mayor orden.
Ahora creamos el div o capa que deseamos ocultar y mostrar, para ello utilizamos una propiedad css “display” y le asignamos “none” para que desde que se carge la pagina este oculta, después creamos dos botones con un id “mostrar” y otro “ocultar” para hacer funcionar nuestro div.
<html> <head> </head> <body> <button id="mostrar">Mostrar capa</button> <button id="ocultar">Ocultar capa</button> <div id="texto" style="display:none;"> <h1>Este texto esta oculto.</h1> </div> </body> </html>
Ahora entre las etiquetas “” ponemos las funciones de JQuery, indicamos que cuando se de click al elemento “#mostrar” cambiemos el atributo css del div “#texto”, en este caso lo dejamos en blanco para que nos permita ver el div.
Después indicamos que al presionar el boton “#ocultar” el atributo “display” lo volvemos a poner en “none” para que este se oculte.
<head>
<script type="text/javascript" src="js/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
$(function(){
$("#mostrar").click(function(){
$("#texto").css("display","");
});
$("#ocultar").click(function(){
$("#texto").css("display","none");
});
});
</script>
</head>
Como pueden observar es muy sencillo realizar este efecto, que nos puede servir para muchas funciones, para visualizarlo de una mejor manera pueden ver un ejemplo aquí.
Bueno este formara parte de una serie de consejos y trozos de código (o parte mas completas) para realizar actividades que pueden ser de mucha utilidad.
