Buenas gente acá les doy un proyecto reciente en donde quiero que me ayuden a que termine realizando lo que quiero (ya tengo un 73% de lo que quiero que haga).
archivos que fueron necesarios:
libreria jquery (
jquery-latest.js)
index.html
Bien empecemos.
Código HTML:
<html>
<head>
<title>Mostrar/Ocultar capas superpuestas</title>
<style media="screen" type="text/css">
#div1 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
position:absolute;
width:200px;
height:56px;
z-index:1;
left: 185px;
top: 14px;
margin:5px;
float: right;
background-color:#0F0;
}
#div2 {
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
position:absolute;
width:200px;
height:56px;
z-index:2;
left: 395px;
top: 13px;
margin:5px;
float: right;
background-color:#F00;
}
</style>
<!--/llamada de la librería desde Jquery/-->
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<table width="18%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="20%"><input type="button" value="boton 1"/></td>
<td width="80%">
<script>
//efecto de transicion del modo de ocultación/aparición
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){
$("div").toggle("slow");
});
</script>
<div id="div1">Aca va contenido 2</div></td>
</tr>
<tr>
<td> <input type="button" value="boton 2"/></td>
<td>
<script>
//efecto de transicion del modo de ocultación/aparición
var toggleFx = function() {
$.fx.off = !$.fx.off;
};
toggleFx();
$("button").click(toggleFx)
$("input").click(function(){
$("span").toggle("slow");
});
</script>
<span id="div2">Aca va contenido 1</span></td>
</tr>
</table>
</body>
</html> Bien a Explicar
Lo que lograremos es crear dos capas superpuestas (en este ejemplo los separe a una distancia que se vean las dos capas, una al lado de la otra), lo que se lograría es que desaparezca una capa y de inmediato aparezca la otra por encima de la que estaba antes.
Como vemos en el ejemplo
(Ver Ejemplo del sistema), aparecen los dos div de color verde y rojo uno al aldo del otro; Al precionar "botón 1" desaparecen las dos capas y al volver precionar "boton 1" aparecen de nuevo.
Bien, ahora si precionamos "botón 2"desaparecera el div de color rojo, si lo volvemos a presionar al "botón 2" volvera a aparecer.
jeje aca vamos de nuevo
ahora volvemos a presionar "botón 2" (desaparece div rojo quedando a la vista div verde); presionamos "botón 1"; y desaparecera div verde y aparecera div rojo; volvemos a apretar "boton 1" y desaparecera div rojo y aparecera el verde.....
Y NO SIGO MAS PORQUE YA ME CANSE
Bien ahora acá va mi pregunta ¬¬''
Quiero hacer que este capa 1 a la vista, al presionar "botón 2" que desaparezca la capa 1 y aparezca la capa 2; y al presionar botón 1 que desaparezca capa 2 y aparezca capa 1. ¿Como lo termino de realizar al código??, para que haga tal cual recién expuse mi pregunta.
MUCHAS GRACIAS Y FELIZ AÑO NUEVO PARA TODOS
