tabs-css-jquery

Existen muchas maneras de crear pestañas con CSS, aquí os mostraremos un método de los muchos que existen, acompañado de un poco de jQuery para agregar animaciones y efectos de transición.

Estructura HTML

Usaremos una lista desordenada para las pestañas, seguido del div con clase “tab_container”. Observa que cada item de la lista (pestaña) tiene un atributo “href” que marca la id del div “tab_content”. Es muy importante para conseguir que jQuery funcione. (Esto es solo un ejemplo, se ha elegido “tab1″ pero deberías elegir palabras clave para mejorar tu SEO:

Select Code
<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">
        <!--Contenido del bloque de texto-->
    </div>
    <div id="tab2" class="tab_content">
       <!--Contenido del bloque de texto-->
    </div>
</div>


Existe un fallo muy común, que es tener un borde justo debajo de la pestaña, error que acaba siendo muy frustrante al tener que estar pendiente al mismo tiempo de ordenar las pestañas en línea.

Si elegimos incluir una clase activa para el item de la lista que hayamos clickado en ese momento, conseguiremos quitar ese borde.

Código CSS

Os mostraremos el código CSS de las pestañas:

Select Code
ul.tabs {

margin: 0;

padding: 0;

float: left;

list-style: none;

height: 32px; /*--Define el ancho de las tabs--*/

border-bottom: 1px solid #999;

border-left: 1px solid #999;

width: 100%;

}

ul.tabs li {

float: left;

margin: 0;

padding: 0;

height: 31px; /*--Sustrae 1px de la altura de la lista desordenada--*/

line-height: 31px; /*--Alineamiento vertical del texto dentro de la tabla--*/

border: 1px solid #999;

border-left: none;

margin-bottom: -1px; /*--Desplaza los item de la lista abajo 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  { /*--Estate seguro de que a la tab activa no se le aplicarán estas propiedades hover--*/

background: #fff;

border-bottom: 1px solid #fff; /*--Esto hace que la tab activa esté conectada con respecto a su contenido--*/

}


A continuación, el código CSS del contenido de las pestañas:

Select Code
.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;

}


Código JQuery:

Select Code
$(document).ready(function() {

//Cuando el sitio carga...

$(".tab_content").hide(); //Esconde todo el contenido

$("ul.tabs li:first").addClass("active").show(); //Activa la primera tab

$(".tab_content:first").show(); //Muestra el contenido de la primera tab

//On Click Event

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("active"); //Elimina las clases activas

$(this).addClass("active"); //Agrega la clase activa a la tab seleccionada

$(".tab_content").hide(); //Esconde todo el contenido de la tab

var activeTab = $(this).find("a").attr("href"); //Encuentra el valor del atributo href para identificar la tab activa + el contenido

$(activeTab).fadeIn(); //Agrega efecto de transición (fade) en el contenido activo

return false;

});

});

Estandarización

CSS 2.1 inválido (propiedades CSS3 border-radius no aplicables a CSS 2.1).

XHTML 1.0 Transitional válido.

Ejemplo de su funcionamiento

Ver ejemplo de las pestañas con CSS + JQuery

Conclusión

De esta forma tendremos una sencilla lista de pestañas con contenido para organizarlo mejor, además de aplicarle bonitos efectos de transición.

Cualquier duda, sugerencia u opinión puede escribirse desde los comentarios ;-)

Vía | Sohtanaka

Si te ha gustado este artículo, puedes recibir gratis más y mejor por RSS, Twitter, Facebook o correo electrónico. ¡Muchas gracias por leerme!