El uso de pestañas o tabs, es una gran forma de estructurar la información de una página web de forma clara y diferenciada, ayudando al usuario a distinguir grupos de contenidos, asà como los subgrupos que estos contienen.
Mediante el uso de jQuery suavizamos el comportamiento que las pestañas tendrÃan con CSS puro. Puedes ver un ejemplo de tabs hechos con CSS puro aquÃ:
CSS Tabs.
Como puede apreciarse el cambio de una pestaña a otra es muy brusco. Con jQuery podemos solventar este aspecto del CSS.
puedes ver el ejemplo en marcha aquÃ:
ejemplo de tabs.Crear los tabs con jQuery y CSS
Para crear este efecto de pestañas, utilizo el código que el mismo Soh Tanaka publicó hace un tiempo en su blog, tabs simples con CSS y jQuery. Este diseñador creó un tutorial para incluir contenido en Tabs usando jQuery y CSS.
Un sencillo HTML
Básicamente el código HTML es el siguiente:
<ul>
<li><a href="#tab1">Gallery</a></li>
<li><a href="#tab2">Submit</a></li>
</ul>
<div>
<div id="tab1">
<!--Content-->
</div>
<div id="tab2">
<!--Content-->
</div>
</div>
Luego su CSS
ul.tabs {
margin: 0;
padding: 0;
float: left;
list-style: none;
height: 32px; /*--Set height of tabs--*/
border-bottom: 1px solid #999;
border-left: 1px solid #999;
width: 100%;
}
ul.tabs li {
float: left;
margin: 0;
padding: 0;
height: 31px; /*--Subtract 1px from the height of the unordered list--*/
line-height: 31px; /*--Vertically aligns the text within the tab--*/
border: 1px solid #999;
border-left: none;
margin-bottom: -1px; /*--Pull the list item down 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;
/*--Gives the bevel look with a 1px white border inside the list item--*/
outline: none;
}
ul.tabs li a:hover {
background: #ccc;
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
/*--Makes sure that the active tab does not
listen to the hover properties--*/
background: #fff;
border-bottom: 1px solid #fff; /*--Makes the active tab look like it's connected with
its content--*/
}
Y este el CSS del contenido de los tabs:
.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;
}
Los tabs, jQuery en acción
Este el JavaScript para activar jQuery en los tabs (pestañas). Va en el header de la página, o mejor aún, en un archivo externo:
$(document).ready(function() {
//When page loads...
$(".tab_content").hide(); //Hide all content
$("ul.tabs li:first").addClass("active").show(); //Activate first tab
$(".tab_content:first").show(); //Show first tab content
//On Click Event
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active"); //Remove any "active" class
$(this).addClass("active"); //Add "active" class to selected tab
$(".tab_content").hide(); //Hide all tab content
var activeTab = $(this).find("a").attr("href"); //Find the href attribute value to
identify the active tab + content
$(activeTab).fadeIn(); //Fade in the active ID content
return false;
});
});
Hay que acordarse también de cargar el core de jQuery en el head para que funcione. Yo particularmente lo cargo del CDN de Google en lugar de almacenarlo en el servidor, para evitar sobrecargar el hosting del sitio para el que estoy diseñando la página web:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js">
</script>