Tabs con jQuery? Fácil!

Escrito por Krato en jQuery el 07 de 25 del 2009 | Sin Respuestas

Hay muchas formas de crear tabs en Ajax. Si buscas en google o cualquier otro buscador podrás encontrar cientos de opciones igual de válidas. Pero yo os voy a enseñar una manera fácil de hacerlo en tan solo 10 lineas de código. Además es funcional tanto en Chrome, Firefox, Opera, Safari e incluso Internet Explorer.

Vamos a empezar por lo primero, el código html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQUery Tabs - 2kblog.net</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
<link href="tabs.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tabs.js"></script>
<script language="javascript" type="text/javascript">
	jQuery(document).ready(function(){
		jQuery("#tabs").tabs();
	});
 </script>
</head>
 
<body>
<div id="tabs">
    <ul class="misTabs"> 
	<li><a href="#blog" class="activa">2kBlog</a></li> 
	<li><a href="#tab1">Tab1</a></li> 
	<li><a href="#tab2">Tab 2</a></li> 
	</ul> 	 
	<div id="blog">
    	Ejemplo 1         
    </div> 
		Ejemplo 2
	</div> 
	<div id="tab2">
		Ejemplo 3
	</div> 
</div>
 
</body>
</html>

Vamos a desribir el código:

Como siempre la llamada a jQuery alojada en google.
La llamada al css y al javascript que haremos
Para que funcione la función javascript deberemos tener una estructura igual a la mostrada en el ejmplo, es decir, un div general, dentro una lista y antes de cerrar el div general los distintos divs a los que llamaremos.
Para que el script funcione debemos llamarle mandandole la id del div general, en mi caso: #tabs

Ahora veamos el js de 10 lineas: (lo pongo comentado para que lo veais)

jQuery.fn.tabs = function() {  //Creamos la función
	var elemento = jQuery(this);  //creamos una variable opara recoegr el elemento
	jQuery(elemento).find("div").hide().eq(0).show(); //Escondemos todas menos el primer elemento
	jQuery(elemento).find("ul li a").click(function(){ //para cada elemento clicado
		jQuery(elemento).find("ul li a").removeClass('activa'); //le quitamos la clase por si la tiene activa
		jQuery(this).addClass('activa'); //Añadimos la clase al elemento pulsado
		jQuery(elemento).find("div").hide(); //escondemos todos los divs
		jQuery( jQuery(this).attr('href') ).fadeIn(1000); //mostramos el div al elemento que hemos pulsado
	});
}

Lo único que hay que señalar es que podemos cambiar el modo en que se muestra y la velocidad. En vez de fadeIn podemos usar slideDown o slideToggle o simplemente show. Y en cuanto a la velocidad podemos usar milisegundos, o poner “slow” para lento, “fast” para rápido o “normal” para normal. (recordad que si ponemos 3000 serán 3 segundos)

Un ejmplo de la función con el css del ejemplo:

jQuery tabs - Facil!

Como podes ver podemos incluir texto o video o cualquier cosa que pensemos.

Podeis descargaros el ejemplo desde aquí: