comparte el articulo 

Crear tabs o pestañas con jQuery y CSS – Estructurando el contenido de una página web

Actualizado el 10/06/2010 < > 9 Cometarios

Resumen: En este artículo vamos a ver como se hacen tabs o pestañas con jQuery y CSS para agrupar la información de la página web de forma lógica y organizada.

Cada vez me gusta más jQuery y las cosas que se pueden hacer con este framework.

Un efecto en particular que me parece muy útil cuando quieres desplegar una cantidad grande de información en poco espacio es el uso de los tabs o pestañas.

El uso de tabs o pestañas, es una buena 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.

Para que te hagas una idea de lo que vamos a hacer en este tutorial, aquí tienes una imagen de ejemplo:

Y puedes ver el ejemplo en marcha aquí: ejemplo de tabs.

Esta página es de Soh Tanaka, un diseñador de Los Angeles al que sigo muy de cerca porque me encanta su trabajo y la calidad con la que lo hace. Es un maestro del CSS.

El código para crear los tabs con jQuery y CSS

Bueno, para crear este efecto de pestañas en las páginas en las que trabajo, 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>

La magia viene con CSS

Este el CSS de los tabs:

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;
}

Y para rematar los tabs, jQuery en acción

Y 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>

Publicado el 10/06/2010, última actualización 10/06/2010.

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que mantengas los enlaces que hay dentro del artículo y pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica Milán

URL: Crear tabs o pestañas con jQuery y CSS

Añadir Comentario (Subir al texto)

9 Cometarios

  1. dexter

    muy bueno el efecto, vamos a probarlo a ver que tal no s queda..gracias

    Domingo, 11 de julio 2010

  2. Ricardo

    Hola!! tengo muchas dudas, apenas me estoy iniciando en esto de las paginas web y diseños css, lo primero:
    Inserte el codigo CSS en mi plantilla CSS
    Segundo:
    En donde debo insertar el codigo JQuery, en el header, pero ¿en el header de donde? no entiendo esa parte, se debe insertar en mi plantilla general CSS
    y el script para activar JQuery se inserta en el head, pero en que head ¿en el de mi plantilla general css? o ¿cada vez que haga un articulo en mi blog, debo insertar el codigo?
    Necesito utilizar ese codigo CSS, porfavor ayudenme!!!

    Miércoles, 2 de febrero 2011

  3. Jorge

    Ricardo
    el codigo jQuery debes insertarlo dentro de etiquetas que deberas colocar dentro de las etiquetas head, el script para incluir jQuery tambien va dentro de otras etiquetas que colocarias dentro de las etiquetas head.
    Ahh dentro de la plantilla CSS solo debes colocar los estilos y nada mas

    Lunes, 9 de mayo 2011

  4. ginna

    Disculpe tengo un problema ,e tab se desactiva cuando agrego un menu vertical de jquery, se desactiva y me dice que no se acepta el valor nulo en esta linea —— $(“.tab_content”).hide(); //Hide all content—–, me dice que no acepta valores nulos. nose cual podría ser el problema, espero y agradecere por la ayuda prestada.

    Miércoles, 1 de junio 2011

  5. Juan

    se podrá hacer esto en forma vertical? (las pestañas)

    Jueves, 22 de septiembre 2011

  6. Verónica Milán

    Claro, tendrías que cambiar las CSS bastante, pero sí, puede hacerse.

    Martes, 4 de octubre 2011

  7. Miguel

    Me ha servido mucho, gracias

    Miércoles, 30 de mayo 2012

  8. edgardo

    Hola Verónica, el ejemplo no funciona como está publicado, faltan asignar las clases .tabs y .tab_content . Completo quedaría así:

    Gallery
    Submit

    Gracias lo mismo, quería aportar las correcciones. Saludos.

    Martes, 27 de agosto 2013

  9. edgardo

    bueno, me convirtió el código,

    lo que hay que hacer es agregarle al UL inicial: class=”tabs”
    y luego a cada DIV de contenido además del su correspondiente ID, agregar la clase : class=”tab_content”

    Martes, 27 de agosto 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras