Tabs CSS simples con jQuery

os Tabs CSS son una forma popular de navegación que permiten mostrar distintas areas de contenido al usuario mediante la selección de una pestaña.

Este tutorial de Soh Tanaka nos mostrara como crear tabs sencillos con CSS y jQuery, para comenzar tenemos que tener la ultima version de jQuery(1.3.2).

 

Paso 1: Realizar la estructura HTML

<ul class="tabs">
    <li><a href="#tab1">Gallery</a></li>
    <li><a href="#tab2">Submit</a></li>
</ul>

<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Content-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Content-->
</div>
</div>

 

Paso 2: Estructurar la hoja de estilos

CSS para los tabs

ul.tabs {
	margin: 0;
	padding: 0;
	float: left;
	list-style: none;
	height: 32px;
	border-bottom: 1px solid #999;
	border-left: 1px solid #999;
	width: 100%;
}
ul.tabs li {
	float: left;
	margin: 0;
	padding: 0;
	height: 31px;
	line-height: 31px;
	border: 1px solid #999;
	border-left: none;
	margin-bottom: -1px;
	overflow: hidden;
	position: relative;
	background: #e0e0e0;
}
ul.tabs li a {
	text-decoration: none;
	color: #000;
	display: block;
	font-size: 1.2em;
	padding: 0 20px;
	border: 1px solid #fff;
	outline: none;
}
ul.tabs li a:hover {
	background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover  { 
	background: #fff;
	border-bottom: 1px solid #fff;
}

 

CSS para el contenido del tab

.tab_container {
	border: 1px solid #999;
	border-top: none;
	overflow: hidden;
	clear: both;
	float: left; width: 100%;
	background: #fff;
}
.tab_content {
	padding: 20px;
	font-size: 1.2em;
}

 

Paso 4: Incluir la libreria jQuery en el head del html.

Ponemos incluir la libreria jQuery por medio de Google, de esta manera no consumiriamos mas recursos de nuestro hosting.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>

 

Paso 4: Crear el JavaScript para el funcionamiento de los tabs.

$(document).ready(function()
{
	$(".tab_content").hide();
	$("ul.tabs li:first").addClass("active").show();
	$(".tab_content:first").show();

	$("ul.tabs li").click(function()
       {
		$("ul.tabs li").removeClass("active");
		$(this).addClass("active");
		$(".tab_content").hide();

		var activeTab = $(this).find("a").attr("href");
		$(activeTab).fadeIn();
		return false;
	});
});

Ver demo

También te puede interesar

38 Comments

  1. caos30
    jul 07, 2009 @ 22:33:16

    Gracias por este regalo! un código excelente, limpio y el resultado inmejorable!!

    SERGI

  2. edoswit
    oct 18, 2009 @ 17:34:26

    Buena man, me gusto tu publicación, ahora voy a emplearlo y creo q quedara ok. xD

  3. Ale
    nov 30, 2009 @ 17:33:12

    Te agradezco mucho probe montones y el tuyo es el que me dio resultado.

  4. Ale
    dic 03, 2009 @ 00:27:05

    Te hago una consulta cuando intento utilizar mas de una vez en la misma pagina, me aparecen contraidos los datos, como podría solucionarlo? gracias.

  5. Pedro
    may 05, 2010 @ 20:37:11

    Gracias… el codigo muy facil de entender…te felicito todo muy bien…pero me gustaria que me ayudes con un un problema…cuando quiero generar dentro de los tabs otros tabs pero que carguen de acuerdo a los resultados que me de la base de datos….

  6. Bruno
    may 15, 2010 @ 17:21:45

    Excelente aporte!

  7. Alexander
    jul 08, 2010 @ 23:49:46

    Como haces el menu flotante que esta a la izquierda…esta buenisimo

  8. Nacho
    jul 19, 2010 @ 06:01:35

    Genial!!! me ha venido de perlas, aunque me surge un problemilla al incluir un highslide o slimbox para galería de imágenes dentro de una de las tabs. No sé si es por conflicto entre capas, js, o que? Si conoces alguna forma de solucionarlo o un jquery para galerís de imágenes que funcione dentro de las tabs te lo agradería.

    Saludos.

  9. alex
    ago 11, 2010 @ 16:30:53

    queria hacer una pregunta, soy novato en el tema del css, tengo mi blog y estoy utilizando estos codigos para una pelicula que tengo en 5 partes, ya agregue el codigo que va en el html y el css para el contenido, lo que nose es la parte del javascript de como crearlo y como implementarlo, si me das una mano con eso, de explicarlo un poco mas, te lo agradeceria mucho.

  10. Jose Tapia
    ago 18, 2010 @ 03:11:00

    Muchas gracias me ha servido de mucho saludos desde costa rica

  11. johan
    ago 20, 2010 @ 09:58:26

    Hola el sistema de las tabs esta muy bueno, ya lo probe y lo modifique a mi gusto . .. y necesito ayuda con una cosita . .

    yo quisiera que al cargar la pagina iniciara por el tab numero 3, que debo cambiar y en que parte del codigo . . .

    No me vayan a decir que la informacion que esta en el tab3 la pase al tab1 . . .eso no me sirve . . .

    muchas gracias por la ayuda . . .

  12. johan
    ago 20, 2010 @ 10:01:41

    muy bueno

    como hago para que inicie por el tab3 y no por el tab1

    muchas gracias

  13. jdaanial
    ago 26, 2010 @ 04:21:12

    Muy bien, me funciono a la primera…
    Muchas Gracias!

  14. Daniel
    sep 08, 2010 @ 09:49:04

    Muy bueno el aporte, como puedo configurar para que sea automatico el cambio de los tabs? es decir que vaya cambiando cada x segundos.

    gracias

  15. danzig
    oct 28, 2010 @ 13:14:29

    Excelente, muchas gracias me sirvio un montón, éxitos.

  16. Ulises
    dic 20, 2010 @ 12:35:37

    Excelente aporte!! Código limpio! Funciona a la perfección!

  17. fforna
    ene 19, 2011 @ 17:08:26

    su uso iframes en el contenido de los tabs no funciona

  18. Fito
    feb 07, 2011 @ 08:58:32

    Chevre Gracias, pero kisiera saber si komo puedo hacer para poder navegar de tab eb tab desde un boton aparte aso como <>>, si alguiel me Podria pasar ese Dato se lo Agradeceria…

  19. anton
    feb 21, 2011 @ 20:08:57

    Genial código y explicación. Enhorabuena!!

  20. Tabs con CSS y jQuery
    mar 02, 2011 @ 23:37:58

    [...] ver el demo funcionando o puedes ver éste tutorial para implementarlo tú mismo. Etiquetas: css, jquery, recursos, ui ¿Te pareció [...]

  21. Jose
    mar 03, 2011 @ 09:02:10

    Hola, grcias por el codigo, lo estoy usando, teno un pequeño o gran problema es en Chroome No Funciona, no se ocultas los DIv, pero In IE. tood marcha bien. no se si me puedes sugerir alguna solucion.

  22. Charliechin
    mar 11, 2011 @ 04:25:59

    Jose a mi me ha ido bien en Chrome. Revisa los pasos.

  23. ffernnado
    may 19, 2011 @ 08:55:33

    hola amigos esta perfecto este plugin gracias

  24. Gabriela - Punta del Este
    may 23, 2011 @ 16:11:20

    Muchas gracias por ésto: ya la apliqué en mi sitio web y queda muy bien. Además tu sitio es muy bueno
    Saludos

  25. Gabriel - Publica Tacna
    jun 11, 2011 @ 17:06:02

    Gracias por el codigo, lo voy a probar ahora mismo en mi sitio, gracias

  26. Oscar Canchica
    jun 16, 2011 @ 09:14:22

    Esta genial y sencillo, tremendo aporte, muchas gracias!!!

  27. pablo
    jul 16, 2011 @ 16:35:21

    Muy buena herramienta y muy bien explicada, me funciona perfecto muchas gracias

  28. Convertir Flash a HTML5 con Wallaby | Tecnologia, Desarrollo Web, Posicionamiento Web SEO
    ago 17, 2011 @ 09:47:24

    [...] Tabs CSS simples con jQuery [...]

  29. Lorenita
    ago 26, 2011 @ 08:41:04

    Está genial justo lo que buscaba para el index de una web de un cliente! gracias!

  30. marcos antonio
    sep 15, 2011 @ 16:15:21

    chevere muy bueno tu codigo…Funciona a la perfeccion

  31. CarlosBerman
    sep 26, 2011 @ 20:32:11

    Todo está bien, excepto que no puede usarse anchors, sería lo ideal, sobre todo para mi que quiero hacer posts bilingües, poder vincular directamente el contenido de los tabs usando “#spanish” o “#english”, he usado otros tabs así, pero causan conflictos con otros scripts que tengo, este está perfecto porque usa la librería jQuery que ya uso, veré si puedo hacerlo funcionar con anchors.

  32. Pablo
    sep 30, 2011 @ 18:50:18

    $(“ul.tabs li:first”).addClass(“active”).show();

    podria funcionar sin el .show();

    Saludos!

  33. Oscar
    oct 08, 2011 @ 13:47:23

    No se como agradecerle esto, he intentado poner el Tab con muchísimos y este fue el único que me sirvió, muchísimas gracias por esta gran ayuda que me has dado.

    Saludos y que Dios lo llene de bendiciones.

  34. luis
    nov 14, 2011 @ 12:51:55

    amigo que ayudasa re buenazo tu codigo sos el mejor man exitos

  35. Hans
    nov 23, 2011 @ 09:03:15

    Hola, limpio y compacto, me gusta, lo usaré gracias por compartirlo!
    Me permitiré agregar unas líneas para que se puedan tener varios Tabs en la misma página:

    Saludos desde Chile.

    ———————————————

    $(“ul.tabs”).each(function(){
    var tab_conttainer = $(this).next()
    var tab_index = $(this)
    $(“li:first”,this).addClass(“active”).show();

    $(“.tab_content”,tab_conttainer).hide();
    $(“.tab_content”,tab_conttainer).eq(0).show();

    $(“li”,tab_index).click(function()
    {
    $(“li”,tab_index).removeClass(“active”);
    $(this,tab_index).addClass(“active”);
    $(“.tab_content”,tab_conttainer).hide();

    var activeTab = $(this,tab_index).find(“a”).attr(“href”);
    $(activeTab,tab_conttainer).fadeIn();
    return false;
    });
    })

    ———————————————

  36. jhonny nina veizaga
    nov 29, 2011 @ 11:49:42

    Muy bueno su post, he implementad esto, y me ha funcionando de maravillas, gracias.

  37. Marita
    dic 02, 2011 @ 09:47:06

    Excelente.
    Pero quisiera hacerle funcionar dentro de un frame???
    Es posible? y si me dan alguna idea. Gracias.

  38. Andres
    ene 09, 2012 @ 12:09:47

    Excelente, fácil de implementar y manejar el diseño, muchas gracias! from Talca Chile :D