Tags: 
Los 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;
});
});
Soy
July 7th, 2009 at 10:33 pm
Gracias por este regalo! un código excelente, limpio y el resultado inmejorable!!
SERGI
October 18th, 2009 at 5:34 pm
Buena man, me gusto tu publicación, ahora voy a emplearlo y creo q quedara ok. xD
November 30th, 2009 at 5:33 pm
Te agradezco mucho probe montones y el tuyo es el que me dio resultado.
December 3rd, 2009 at 12:27 am
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.
May 5th, 2010 at 8:37 pm
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….
May 15th, 2010 at 5:21 pm
Excelente aporte!
July 8th, 2010 at 11:49 pm
Como haces el menu flotante que esta a la izquierda…esta buenisimo
July 19th, 2010 at 6:01 am
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.
August 11th, 2010 at 4:30 pm
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.
August 18th, 2010 at 3:11 am
Muchas gracias me ha servido de mucho saludos desde costa rica
August 20th, 2010 at 9:58 am
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 . . .
August 20th, 2010 at 10:01 am
muy bueno
como hago para que inicie por el tab3 y no por el tab1
muchas gracias
August 26th, 2010 at 4:21 am
Muy bien, me funciono a la primera…
Muchas Gracias!