Tabs (Pestañas) con jQuery

En este tutorial vamos a ver cómo puedes crear un panel con diversas pestañas o tabs con jQuery que se alternen cuando hagas clic en cada una de ellas. Si no sabes usar jQuery, consulta primero el tutorial de introducción a jQuery.

Las pestañas, también conocidas como tabs, son un efecto de jQuery que consiste en una serie de pestañas en disposición horizontal. Debajo de estas pestañas irá un panel que alternará su contenido en función de la pestaña sobre la que se ha hecho clic.

Antes de continuar, debes asegurarte de que has incluido el script de jQuery en tu proyecto.

Versión simplificada

Primero vamos a agregar el código HTML, en donde definimos un contenedor para las pestañas con la clase .tabs. En su interior agregamos un menú con diferentes enlaces en disposicición horizontal. Cada enlace tendrá un atributo href que hará referencia al id del panel que incluye el contenido correspondiente. Por ejemplo, la primera pestaña hace referencia al panel #tab-1.

A la primera pestaña le asignaremos también la clase .active, ya que será la pestaña que estará activa por defecto nada más cargar el componente. Solamente podrá haber una pestaña activa a la vez, por lo que las otras no deberán incluir esta clase, al menos por ahora.

Seguidamente, hemos definido los diferentes paneles junto con su contenido.

<h1>Tabs</h1>

<div class="tabs">
  <nav class="tab-list">
    <a class="tab active" href="#tab-1">Tab 1</a>
    <a class="tab" href="#tab-2">Tab 2</a>
    <a class="tab" href="#tab-3">Tab 3</a>
  </nav>

  <div id="tab-1" class="tab-content show">Pellentesque aptent rhoncus feugiat ullamcorper suscipit ante cras bibendum massa suspendisse nascetur nulla sociosqu, curabitur eros magna morbi hac ultrices natoque varius condimentum tristique tortor porta.</div>

  <div id="tab-2" class="tab-content">Lorem ipsum dolor sit amet consectetur adipiscing elit condimentum, litora pellentesque lobortis mus suscipit integer.</div>

  <div id="tab-3" class="tab-content">Sapien hac fermentum erat congue sodales egestas suspendisse lobortis, non tristique quam penatibus vehicula mus ultricies.</div>
</div>

Ahora vamos a agregar el código JavaScript de nuestro componente. Debemos agregar una acción al evento click() de las pestañas superiores. Dado que hemos definido las pestañas como enlaces, debemos eliminar su comportamiento por defecto mediante la función event.preventDefault(), que irá en el interior de nuestra acción.

Seguidamente eliminaremos la clase .active que pueda haber en cualquier pestaña, así como la clase .show de los paneles, para así ocultarlos todos. Luego agregamos la clase .active a la pestaña en la que se ha hecho clic y también la clase .show al panel correspondiente:

$(".tab-list").on("click", ".tab", function(event) {
  event.preventDefault();

  $(".tab").removeClass("active");
  $(".tab-content").removeClass("show");

  $(this).addClass("active");
  $($(this).attr('href')).addClass("show");	
});

Finalmente agregaremos algunos estilos CSS básicos:

.active {
	font-weight: 600;
}

.tab-content {
	display: none;
}

.show {
	display: block;
}

Y con esto ya estaría todo listo. Puedes ver el resultado en funcionamiento aquí.

Versión avanzada

Vamos a mejorar algo el aspecto de nuestro acordeón. Para ello bastará con que agreguemos algunos estilos CSS:

html {
  min-height: 100%;
  font-family: 'Nunito', sans-serif;
}

body {
  background: #7db4fc;
  line-height: 1.5;
}

h1 {
  font-weight: 200;
  font-size: 3rem;
  color: #fff;
  text-align: center;
}

.tabs {
  max-width: 600px;
  margin: 0 auto;
}

.tab-list {
  padding-bottom: 0.6rem;
}

.tab {
  border: 1px solid transparent;
  display: inline-block;
  text-decoration: none;
  padding: .5rem 1rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .6);
  background: rgba(10, 20, 30, .2);
}

.tab.active {
  color: white;
  background: rgba(255,255,255,.2);
  border: 1px solid rgba(255, 255, 255, .5);
}

.tab-content {
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  display: none;
  padding: 1.5rem;
  color: #4a5666;
}

.tab-content.show {
  display: block;
}

Y con esto ya estaría listo. Puedes ver el resultado en funcionamiento aquí.

---