Check the new version here

Popular channels

Mostrar y ocultar Div con JQuery

Pues bien amigos primero que nada el codigo me lo encontre mietras realizaba una investigacion y si bien se medio explico me di a la tarea de inspeccionarlo, entenderlo y compartirlo para la banda.

iniciamos:

Supongamos que se te pide un menu de 5 elementos (se pueden agregar mas aclaro que 5 por el ejemplo a explicar.) y se pide que cuando seleciones una opcion del menu se muestre contenido.

Esto quiere decir que si seleciono la opcion1 me debe mostrar el contenido de la opcion1, al selecionar la opcion 2, el contenido de la opcion1 desaparece y se muestra el contenido de la opcion2, y asi susesivamente.

Iniciando el ejemplo:

Paso uno:Creo el menu en un div ya sea alinenadolo vertical u horizontalmente, usando nav, o listas, usando span, como les guste en mi caso lo realise de la siguiente manera



el codigo es simple la verdad pueden maquetar a su gusto el div y si bien debemos centranos en los enlaces:

Si notan cada enlace tiene la clase "mo" y en enlace apunta al "ID" de un div adivina este div es el contenedor que posee el contenido que se quiere mostrar. ejemplo claro.

si se le da clic al enlase Div uno, este mostrara el contenido del Div uno


Esto quiere decir que solo debemos crear los div que contendran el contenido.


Div Uno


Div Dos


Div Tres


Div Cuatro


Div Cinco




Ahora notamos bien que lo que realmente hacemos es que cuando selecionamos una opcion este mostrara el div al cual apunta. (simple no??)

¿Por que los div tiene la clase oculto y solo uno mostrar?

muy buena pregunta sucede que lo que realizaremos con el codigo jquery es que cuando cargue el DOM por defecto mostrara un div de contenido en este caso el div #uno. y los demas seran ocultos.

Ahora bien cuando se selecione otra opcion esta se ocultara y mostrara el contenido de la opcion selecionada veamos el codigo vale




Espero lo entendieron les dejo el demo

http://acumulandokilometros.com/demos/demo1.html

Siganme los buenos:

0
0
0
0No comments yet