Mostrar y ocultar ventanas con javaScript + Jquery aplicados a TABS

Cuando estamos en pleno desarrollo de una pagina web lo que queremos es generar un codigo limpio, entendible mas aun si se desea interactuar con javaScript. Para ello existe una libreria muy interesante llamada JQuery, esta la pueden descargar de el sitio oficial:
Descargar Jquery.

Personalmente el ejemplo que les muestro a continuacion me sirvio para crear el siguiente tab:



Lo que haremos ahora sera hacer un ejemplo similar para que puedan aplicarlo a sus paginas, esta consiste en tener 3 enlaces (click1,click2,click3) y tres capas (capa1, capa2, capa3), al hacer clic en uno de los botones 1 de las capas debe aparecer y 2 de las capas debe ocultarse.

PASOS

1.- Descargar la libreria JQuery del sitio descargar.

2.- Dentro la etiqueta head hacemos referencia a nuestra hoja de estilo, en este caso se encuentro dentro de la carpeta css/index.css, ademas incluimos nuestra libreria Jquery que se encuentra dentro de la carpeta js/jquery-1.3.2.min.js, tambien al script mostrarOcultar.js que hara que se pueda mostrar y ocultar cada tab, al llamar al evento click:



< html >

< head >
<script type="text/javascript" src="js/jquery-1.3.2.min.js"> </script>
<script type="text/javascript" src="js/mostrarOcultar.js"> </script>
< link rel="stylesheet" href="css/index.css" type="text/css" >
< /head >

< /html >




3.- Una vez importada la libreria y la hoja de estilo pasamos a crear nuestro menu, dentro del cuerpo (body):

< body >
< ul >
<li id="click1">SigNup /li>
<li id="click2">Login /li>
<li id="click3">Login /li>
< /ul >
< /body >


4.- Creamos, las capas que se mostraran y ocultaran cuando llamemos al evento click, este codigo debe estar debajo del menu que creamos en el punto 3.


< div id="capa1" class="capa1" >
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1 Texto 1
< /div >


< div id="capa2" class="capa1" >
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2 Texto 2
< /div >


< div id="capa3" class="capa3" >
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3 Texto 3
< /div >



5.- Ahora construiremos el codigo de mostrarOcultar.js

$(document).ready(function(){
$("#click1").click(function(){
$("#capa1").show("slow");
$("#capa2").hide("slow");
$("#capa3").hide("slow");
});

$("#click2").click(function(){
$("#capa2").show("slow");
$("#capa1").hide("slow");
$("#capa3").hide("slow");
});

$("#click3").click(function(){
$("#capa3").show("slow");
$("#capa2").hide("slow");
$("#capa1").hide("slow");
});
});

Pasaremos a explicar el codigo que vimos hace un momento: