JQuery. Como crear las tabs más fáciles

Autor: | Categoría: | 13 Comentarios
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.

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.

Ahora crearemos los estilos para que tengan forma de tab.

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

Pues ya nos podemos poner manos a la obra con el código.

<script type="text/javascript" language="javascript">// <![CDATA[
$(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?

Etiquetas: , , , ,
Diseñador Gráfico, Web y Multimedia. Amante del buen diseño. Me apasiona diseñar. From Barcelona to the world. http://www.dashaft.net
  • Marcomaq21

    Hola tengo una pregunta quiero hacer algo como lo que esta en esta pagian 
    http://www.laboratoriosmedicos.hn/servicios/  quiero saber como lo hago usando lo anterior. 

    • dahir

      no tienes q usar jquery para eso: es solo una lista tipo viñetas (bullets) con links adentro.

      Para los efectos tienes q usar CSS (class=”link1″, class=”link2″ etc)

    • http://www.dashaft.net/ dashaft

      Se trataría de poner todas las páginas en el mismo html y hacer como comento en el tutorial, separando cada parte con su div y su id, no es complicado :)

      Saludos!

    • http://www.dashaft.net/ dashaft

      Se trataría de poner todas las páginas en el mismo html y hacer como comento en el tutorial, separando cada parte con su div y su id, no es complicado :)

      Saludos!

  • nicolas

    como le cambio el color a los tabs? o si o si tienen que ser blancos

    • http://www.dashaft.net/ dashaft

      No @nicolas pueden ser del color que tu quieras, en el css le puedes poner el color que más te guste: .tab a{ background-color: #elquequieras };

      Gracias por el comentario!

    • http://www.dashaft.net/ dashaft

      No @nicolas pueden ser del color que tu quieras, en el css le puedes poner el color que más te guste: .tab a{ background-color: #elquequieras };

      Gracias por el comentario!

  • juando.dlp

    Hola me pareció excelente tu tutorial. muchas gracias por poner esta info que es de mucha ayuda para los que apenas empezamos a moverle a lo del web. tengo un problema y te agradecería mucho si pudieras darme alguna pista de ¿como puedo meter estas tabs que creaste en el tutorial a una pagina echa en wordpress? saludos. y gracias

    • http://www.dashaft.net/ dashaft

      juando.dlp gracias!!!
      Para meter esto en WordPress es bien fácil, se trata de entrar en el theme de tu wordpress y añadirle en la página que necesites una tab el código, si quieres, contáctame por email para tu caso más concreto y te puedo ayudar mejor!
      Saludos y de nuevo, gracias!

  • juando.dlp

    Hola muchas gracias logre hacerlo yo solo. solo que ahora te molesto con otra duda. ¿sabes como puedo cambiar el color al enlace activo? osea quiero que cambie el color de el enlace de la tab que estoy viendo en ese momento.
    muchas gracias y saludos.

    • http://www.dashaft.net/ dashaft

      Tanquilo no molestas ;)
      Pues es tan sencillo como añadir lo siguiente:
      this.addClass(‘active’); dentro de la función antes del return false, y agregando la clase .active al css con el color que quieras.

      Para que esta clase desaparezca al hacer cada click tendrías que añadir un this.removeClass(‘active’); al principio de la funcion para que se borrara dicha clase del link activo

      Saludos y para lo que necesites aquí estoy ;)

  • Cesar Amezcua

    Hola como puedo hacer que si cargo la pagina con un hashtag me cargue directamente ese hashtag, es decir mipagina.com/#pestana3. Gracias

    • http://www.dashaft.net/ dashaft

      ¡Hola Cesar! Para conseguir lo que tu necesitas, deberías hacer dos cosas:
      1º Añadir dentro del click esta linea –> tabContainerssup.hide().filter(‘#tpestana3′).show();
      2º Eliminar esto –> .filter(‘:first’).click() (que es lo que le indica al script que empieze por el primero)

      Una tontería verdad ;)

      Saludos y gracias por comentar!