Mostrar y Ocultar DIVs con Jquery

Hola Amigos.

Casi terminando el Domingo, espero que les halla gustado los Wallpapers que les deje, pero ahora vamos a darle un poco de efecto a nuestro Tutorial: Mostrar y Ocultar DIVs con Javascript. Vamos a utilizar uno de los mas Famosos Framework para JavaScript: jQuery.

Bueno basta de escribir y vamos al grano, primero les dejo el Codigo HTML del ejemplo anterior (sin efectos):

            function capa1(){
                document.getElementById('capa1').style.display = 'block';
                document.getElementById('capa2').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa2(){
                document.getElementById('capa2').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa3').style.display = 'none';
            }
            function capa3(){
                document.getElementById('capa3').style.display = 'block';
                document.getElementById('capa1').style.display = 'none';
                document.getElementById('capa2').style.display = 'none';
            }
Mostrar y Ocultar DIVs con Javascript

Capa 1
Capa 2
Capa 3


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

            * Enlace
            * Enlace
            * Enlace
        

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

Lo primero que haremos sera Agregar el Archivo de jQuery, tenemos dos formas de hacerlo:

1 – La mas sencilla, agregar este codigo a nuestro HTML:

2 – La otra manera, es descargando el Archivo y subirlo a nuestro Servidor:

Una vez agregado esta linea a nuestro Codigo ya tenemos instalado jQuery.

Lo primero que modificaremos son nuestros Links para mostrar u Ocultar los Divs:

Capa 1
Capa 2
Capa 3

Como ven hemos eliminado los parametros “Onclick” y agregamos un “id” a cada uno (Cada ID debe ser unico).

Ahora cambiemos nuestro codigo JavaScript para que usemos las Funcionalidades de jQuery:

$(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");
    });
});

Acuerdensen que deben borrar el Codigo JavaScript anterior:

function capa1(){
    document.getElementById('capa1').style.display = 'block';
    document.getElementById('capa2').style.display = 'none';
    document.getElementById('capa3').style.display = 'none';
}
function capa2(){
     document.getElementById('capa2').style.display = 'block';
     document.getElementById('capa1').style.display = 'none';
     document.getElementById('capa3').style.display = 'none';
}
function capa3(){
     document.getElementById('capa3').style.display = 'block';
     document.getElementById('capa1').style.display = 'none';
     document.getElementById('capa2').style.display = 'none';
}

Todo este codigo hay que eliminarlo ya que no nos servira.

Una vez ya hecho estos cambios tenemos el Resultado con Efectos Listo, pero antes les voy a pasar a explicar un poco las funciones de jQuery:

$(document).ready(function(){

Esta funcion se encarga de cargar todas las funciones creadas con jQuery para cuando el documento ya este listo para poder usarse.

$("#click1").click(function(){

Aqui definimos que al elemento con id, “click1″ tenga una funcion al hacer clic sobre el. y Todo el codigo que se encuentre entre las llaves sera lo que se ejecutara al hacer click sobre ese elemento.

$("#capa1").show("slow");
$("#capa2").hide("slow");

Casi muy facil de entender, solo mostramos (show) y ocultamos (hide) el elemento con id que le pasemos.

Ya es hora de mostrarle como ha quedado nuestro Ejemplo.

Les deseo mucha suerte y que cualquier duda que surge, no se la guarden que tienen el Foro para que yo los pueda ayudar con lo que sea!

Saludos…
Maty!