Tabs CSS simples con jQuery

By
tednologia
-
38
319

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="https://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

RELATED ARTICLESMORE FROM AUTHOR

38 COMMENTS

  4. 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. 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….

  8. 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. 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.

  11. 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 . . .

  18. 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…

  21. 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.

  31. 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.

  33. 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.

  35. 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;
    });
    })
    ———————————————

Comments are closed.