BLOG DE DISEÑO WEB CORUÑA

Un poco de todo, recursos, tutoriales, noticias, anuncios...

Sistema de pestaƱas en CSS y jQuery sin utilizar plugins

26/JUN/2013 12.647 visitas Ver comentarios
Sistema de pestaƱas en CSS y jQuery sin utilizar plugins

ADVERTENCIA: Este artículo tiene más de 6 meses de antigüedad. Puede que esta información ya se encuentre obsoleta o haya nuevas y mejores opciones.

Volvemos a jQuery sin plugins y esta vez vamos a hacer un sencillo sistema de pestañas con efecto fade y marcando la pestaña activa aplicando clases CSS.

El método es muy sencillo y no tiene mucha explicación. Seguramente ya sabes lo que es organizar el contendio en pestañas (habrás usado las de jQueryUI o cualquier otras).

Pero, a veces, cargar la librería jQueryUI para usar sólo las pestañas incrementará el tiempo de carga y peticiones de tu web, entonces, porqué no hacer el sistema sin dependencia de ninguna librería adicional a jQuery.

Vamos a ello...
Lo que necesitaremos serán 3 bloques de código que básicamente son:

  • Un poco de CSS para dar estilo a nuestras pestañas y el área de contenido
  • El HTML con las pestañas (una lista desordenada -UL-) y un DIV para contenido por cada pestaña
  • Pocas líneas de javascript para interactuar con nuestras pestañas.

Como casi siempre, te dejo una demo funcional en el botón azul que aparece arriba, los códigos aquí abajo y, si sabes una forma mejor de hacerlo que mejore el rendimiento y la quieres compartir conmigo, prometo guardar tu secreto :)

Código 1 - CSS
ul.tabs{height:30px;width:100%;margin:0;padding:0;list-style:none}
		.tabs li{float:left;height:30px;background:#f5f5f5;border-radius:6px 6px 0 0}
		.tabs li.selected{background:#fff;border:solid #f5f5f5;border-width:1px 1px 0 1px}
			
			.tabs li a:link,.tabs li a:active,.tabs li a:visited,.tabs li a:hover{line-height:30px;font-size:1.1em;text-decoration:none;display:block;color:#000;padding:0 30px}
			.tabs li.selected a:link,.tabs li.selected a:active,.tabs li.selected a:visited,.tabs li.selected a:hover{font-weight:bold}
			
		div.pestana{width:100%;margin:0;padding:0;border:1px solid #f5f5f5;padding:20px;position:relative;top:-1px;z-index:-1;border-radius:0 0 6px 6px}
			.pestana p{font-size:1em;line-height:100%;margin:0;}
Código 2 - HTML
<ul class="tabs">
<li class="selected"><a href="#tab-1">Pestaña 1</a></li>
<li><a href="#tab-2">Pestaña 2</a></li>
<li><a href="#tab-3">Pestaña 3</a></li>
</ul>
<div class="pestana" id="tab-1">
<h2>Soy la pestaña 1</h2>
<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
</div>
<div class="pestana" id="tab-2">
<h2>Soy la pestaña 2</h2>
<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
</div>
<div class="pestana" id="tab-3">
<h2>Soy la pestaña 3</h2>
<p>Lorem ipsum dolor sit amet, impossibile. Elige ipsa quod tamen adnuente rediens eam sed eu fides Concordi fabricata ait. Christus eum ego illum decidat quam dicentes quod eam est in. Eis fictas fundatur sicut in modo cavendum es! Modum cognoscibilis ad quia illum in deinde duas recitare ex auxilium tolle auri eos vero rex in.</p>
</div>
Código 3 - JAVASCRIPT
$(document).ready(function() 
	{
		$('.pestana').hide().eq(0).show();
		$('.tabs li').click(function(e)
		{
			e.preventDefault();
			$('.pestana').hide();
			$('.tabs li').removeClass("selected");
			var id = $(this).find("a").attr("href");
			$(id).fadeToggle();
			$(this).addClass("selected");
		});
	});

Acerca del Autor...

Macadia, es una agencia de Diseño Web Coruña, especializada en maquetación css y desarrollo de páginas web a medida con más de 21 años de experiencia en el desarrollo de páginas web profesionales. Si te ha gustado este artículo, por favor, ayúdanos a difundirlo compartiéndolo con tus amigos y contactos en las distintas redes sociales que utilices. ¡Muchas gracias!

Los comentarios han sido desactivados momentaneamente a la espera de que Disqus adapte su plataforma a la próxima RGPD que entra en vigor desde el 25/05/2018