Dashaft – The Creative Blog
¡Hola! Soy Dashaft y este es mi blog
Aquí podrás encontrar todo lo que necesitas para convertirte en gran diseñador: tutoriales, videos, inspiración, recursos y artículos sobre el mundo del diseño. ¡Disfruta del espectáculo!
Estás viendo:
JQuery. Como crear las tabs más fáciles
Siempre que quieres hacer alguna cosa en tu página más allá de html y css, buscas manera de hacer lo que tu quieres y encuentras cosas hechas por programadores para programadores, yo soy diseñador y me las tengo que apañar para hacer mis diseños sin programador, así que aquí te voy a mostrar como hacer una tab fácilmente, explicándote paso a paso que hago para que lo entiendas.
Primer paso: Componer el html
Deberás crear un menú para poder controlar los elementos a mostrar en tu tab.
<div class="tab"> <a href="#primero">Primero</a> <a href="#segundo">Segundo</a> <a href="#tercero">Tercero</a> <div class="clear"></div> </div> |
Deberás también crear el contenido de la tab, así que si has creado 3 pestañas en tu menú, crearás también 3 contenidos distintos.
<div class="contenedor"> <div id="primero"></div> <div id="segundo"></div> <div id="tercero"></div> </div> |
Ahora crearemos los estilos para que tengan forma de tab.
<style type="text/css"> .tab a{ display:block; float:left; width:100px; height:30px; text-align:center; border:1px solid #666;} .clear{ clear:both;} #primero{ background-color:red; width:350px; height:300px;} #segundo{ background-color:green; width:350px; height:300px;} #tercero{ background-color:blue; width:350px; height:300px;} </style> |
Segundo paso: La programación
Bien, para realizar estas tabs utilizamos JQuery, por lo tanto, o bien tienes en la misma carpeta un archivo .js con la librería o bien enlazas directamente con alguna página que tenga en su servidor tal archivo, en mi caso he llamado a esa página dentro de http://jquery.com
<script src="http://code.jquery.com/jquery-1.4.2.js" type="text/javascript"></script> |
Pues ya nos podemos poner manos a la obra con el código.
<script language="javascript"> <!-- $(function (activar_pestanya) { // llamamos a la función y la nombramos var tabContainerssup = $('div.contenedor > div'); // Convertimos una ruta en una variable, así la llamada a esa ruta será más fácil $('div.tab a').click(function () { // ahora le estamos diciendo que active la siguiente // función cada vez que clickamos dentro de los a situados dentro del div tab tabContainerssup.hide().filter(this.hash).show(); // con la variable que hemos creado antes, le decimos que oculte todo su contenido, y que sólo muestre el contenido del anchor que hemos clickado return false; // ponemos esta linia para que no se nos desplace al hacer click arriba de la página }).filter(':first').click(); // esta sentencia indica que lo primero que mostrará sera el primer anchor de la lista, si pusiéramos :last en vez de :first mostraría el último en un principio }); //--> </script> |
Truquito: Cambia el efecto
Si no quieres que sólo aparezcan o desaparezcan los diferentes contenidos de tus tabs, puedes cambiar el hide() y el show() por fadeOut y fadeIn por ejemplo. ¡Trabájalo un poco y hazlo a tu gusto!
Fácil, ¿no?
-
Marcomaq21
