Cómo crear un menú de pestañas elegante usando jQuery y Css - Tabs - VicioAlex

En este tutorial usaremos JQuery y Css, así que hoy voy a explicarles como se puede animar unas tabs (pestañas) con JQuery con unas pocas lineas de código y un poco de CSS, el famoso tabs con JQuery y CSS que nos resulta muy útil para estructurar la información de una web de forma ordenada o crear menús de navegación, los tabs son una forma efectiva de navegación que nos permite mostrar distintas areas de la web, mediante la seleccion de cada pestaña

Usar la librería jQuery al estructurar el cuerpo de nuestra programación web, le brinda un bonito acabado haciéndolo lucir más profesional a comparación de mostrarla sin ella, poniendo un ejemplo común, no sé si habrás visto la estructura de las páginas de películas para ver online, seguramente que si. Cuando reproduces alguna película, esta aparece en partes o bien en diferentes servidores para poder observar la película, pero si te fijas bien se encuentra organizada en pestañas; opción 1, opción 2, etc. Esas pestañas no son más que las famosas jQuery Tabs acompañados de CSS para obtener un mejor acabado.

Voy a crear un menú con pestañas que nos permita acceder a diferentes contenidos sin refrescar la página. Esto lo vamos a conseguir gracias a jQuery. Al hacer click sobre una pestaña aparece el contenido relacionado eliminando el anterior y marcándose la pestaña seleccionada.

Escribe aqui tu contenido 001

Escribe aqui tu contenido 002

Escribe aqui tu contenido 003

Este es el codigo completo de la aplicacion:

En las lineas 8, 10 y 12 del codigo, reemplazan lo que dice Escribe aqui tu contenido por lo que ustedes quieran que aparesca en esa pestaña.
Pueden agregar el numero de pertañas que ustedes quieran.

<!-- Pestañas elegantes - vicioalex.com -->
<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div></div>
<!-- Pestañas elegantes - vicioalex.com -->

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script><script>
$(document).ready(function()
{var hash = window.location.hash.substr(1);
var href = $('ul.tabs li a').each(function(){
var href = $(this).attr('href');
href=href.substr(1);
if(hash==href){
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).parent('li').addClass("active");
$('#'+hash).fadeIn();} })
$("ul.tabs li").click(function()
{$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var content = $(this).find("a").attr("href");
$(content).fadeIn();
return false;});});
</script><style>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;}.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;}
</style>

Aqui les dejo una breve explicacion del codigo presentado anteriormente

Componemos el codigo html, creamos el contenido de la tab, así que si has creado 3 pestañas en tu menú, crearás también 3 contenidos distintos.

<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div></div>

El siguiente paso será la hoja de estilos (el mismo al que uso para esta plantilla) para poder asignarle un diseño al recuadro que contiene la pestañas, es decir le ponemos guapo con un poco de CSS

<style>
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;}
.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;}
</style>

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://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script><script>
$(document).ready(function()
{var hash = window.location.hash.substr(1);
var href = $('ul.tabs li a').each(function(){
var href = $(this).attr('href');
href=href.substr(1);
if(hash==href){
$(".tab_content").hide();
$("ul.tabs li").removeClass("active");
$(this).parent('li').addClass("active");
$('#'+hash).fadeIn();} })
$("ul.tabs li").click(function()
{$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var content = $(this).find("a").attr("href");
$(content).fadeIn();
return false;});});
</script>

Artificio para mostrar otra pestaña al entrar a la pagina

Para mostrar otra pestaña que no sea la primera, por ejemplo quieren que al cargar la pagina muestre la pestaña numero 3 entonces hariamos lo siguiente:
en nuestra direccion URL colocamos al final "#tab3" y se mostrara la pestaña numero 3.

http://www.tu-paginas-web.com/prueba.html#tab3

Crear mas de una pestaña

Podemas crear la cantitad de pestañas que queramos, solo debemos agregar de la siguiente manera:

<ul class="tabs">
<li class="active"><a href="#tab1">Pestaña 1</a></li>
<li><a href="#tab2">Pestaña 2</a></li>
<li><a href="#tab3">Pestaña 3</a></li>
<li><a href="#tab4">Pestaña 4</a></li>
<li><a href="#tab5">Pestaña 5</a></li>
<li><a href="#tab6">Pestaña 6</a></li>
</ul>
<div class="tab_container"><div id="tab1" class="tab_content">
Escribe aqui tu contenido 001
</div><div id="tab2" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 002
</div><div id="tab3" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 003
</div><div id="tab4" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 004
</div><div id="tab5" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 005
</div><div id="tab6" class="tab_content"  style="display:none;">
Escribe aqui tu contenido 006
</div></div>