29Oct 2010 7 Comments */?>

Tabs en JQuery y reconocimiento de hashtags

Categorías: JQuery, Tutoriales - Tags: , ,

Hace mucho que no pongo un tutorial de JQuery en la web, 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.

Este tutorial es bastante sencillo y se me ocurrió hacerlo porque estoy trabajando en un artículo sobre como crear una aplicación para Twitter con PHP en el cual necesito hacer unas tabs bastante sencillas. Pero no nos adelantemos y vamos a ver como crear tabs con JQuery y CSS.

Lo primero que necesitamos es la estructura HTML :

Hay que tener en cuenta que vamos a mostrar contenido por defecto por lo que hay que aplicar la clase “active” a la pestaña activa y ocultar el contenido que no queremos mostrar con “display:none;”

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
<ul class="tabs">
    <li  class="active"><a href="#tab1">Home</a></li>
    <li><a href="#tab2">Galería</a></li>
    <li><a href="#tab3">Contacto</a></li>
</ul>
 
<div class="tab_container">
    <div id="tab1" class="tab_content">
        <!--Contenido-->
    </div>
    <div id="tab2" class="tab_content"  style="display:none;">
       <!--Contenido-->
    </div>
    <div id="tab3" class="tab_content"  style="display:none;">
       <!--Contenido-->
     </div>
</div>

Aplicando estilo

De momento solo tenemos una lista y un par de divs. Vamos a aplicarle un poco de estilo con CSS:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
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;
}

Incluyendo JQuery

Incluimos JQuery como hacemos siempre.

1
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript"></script>

La magia de JQuery

Por último añadimos el script JQuery que será el encargado de darle vida a nuestras tabs con JQuery y CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$(document).ready(function()
{
 
	$("ul.tabs li").click(function()     //cada vez que se hace click en un li
       {
		$("ul.tabs li").removeClass("active"); //removemos clase active de todos
		$(this).addClass("active"); //añadimos a la actual la clase active
		$(".tab_content").hide(); //escondemos todo el contenido
 
		var content = $(this).find("a").attr("href"); //obtenemos atributo href del link
		$(content).fadeIn(); // mostramos el contenido
		return false; //devolvemos false para el evento click
	});
});

Como ven con unas pocas lineas de código tenemos tabs en jquery

Reconocer links con hashtags como twitter

Sacando un poco más de jugo a este script podemos añadir una función que detecte los hashtags en los links.
Por ejemplo si pasamos el link http://masquewordpress.com/ejemplos/tabs-en-jquery/#tab3 queremos que nos muestre el contenido de la tercera pestaña.
Con el siguiente código podemos conseguirlo:

1
2
3
4
5
6
7
8
9
10
11
  var hash = window.location.hash.substr(1); //recuperamos el hashtag del link
	var href = $('ul.tabs li a').each(function(){ //pasamos por todos los tabs
		var href = $(this).attr('href'); //recuperamos atributo href
		href=href.substr(1); //retiramos # 
		if(hash==href){ //comprobamos que el hash sea igual que el atributo de la pestaña
			$(".tab_content").hide();    //escondemos todo
			$("ul.tabs li").removeClass("active"); //desactivamos pestañas
			$(this).parent('li').addClass("active"); //activamos pestaña actual
			$('#'+hash).fadeIn(); // mostramos contenido requerido
		}											
	})

Todo el código javascript junto sería

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$(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;
	});
});

Como siempre dejen sus dudas en los comentarios. Saludos!!!

Damián Logghe

Programador freelancer y emprendedor en sueños. Contento de ser mi jefe y poder hacer lo que me gusta. WordPress es mi principal fuente de ingreso y me escribo tanto para ayudar como para tener una guia de memoria. Quieres contratarme? Déjame un mensaje.

More Posts - Website

Follow Me:
TwitterFacebookLinkedInGoogle Plus

  • Pingback: Bitacoras.com()

  • Pingback: Como crear una aplicación de Twitter con PHP()

  • Mario

    Gran Script! Gracias!
    En mi caso me he encontrado con un problema. Si el contenido de los tabs esta en la parte baja de la página y esta tiene mucho scroll vertical, se pierde la visualización de todo lo anterior, cabecera, menú, etc… ya que te lleva directamente a la posición del elemento con ese id (hash).
    Saludos!

  • angel

    hola tengo hecho lo siguiente

    <div id="cajamenu">
    <ul id="menuh">
    <li class="activo">INICIO
    <li id="elclub">EL CLUB
    <li id="futbol">FÚTBOL
    <li id="tenis">TENIS
    <li id="basquet">BASQUET
    <li id="natacion">NATACIÓN
    <li id="entretenimiento">ENTRETENIMIENTO

    </div>

    me gustaria saber el codigo jquery para cambiar la clase activa, ya lo intente y no logro hacerlo! una ayuda por favor!

    • Eso es porque que quitaste el class del menu y le agregaste un id.
      Donde yo uso $("ul.tabs li") tu tienes que usar $("#menuh li")
      Saludos

  • Diazune

    cual sería el codigo para inhabilitar un tab? ya que lo utilizo pero cuando identifico que el uss no tiene permiso, debo inhabilitar ó desabilitar el tab? cual sería el codigo? es posible que me orientes. gracias cdiaz

  • excelente aporte,, me pregunto, puedo hacer variables de estilos ccs y cambiarlos por el fadein,? lo intentare y te diré como me fue,,,,gracias por compartir tu conocimiento