Crear pestañas con HTML5, CSS3 y jQuery

Ya hemos visto cuán fácil es crear un acordeón con HTML5, CSS3 y jQuery para mostrar gran cantidad de contenido en poco espacio sin alterar la maquetación ni el diseño de un sitio web.

Otra solución básica consiste en organizar los contenidos en grupos diferenciados de manera tal que el usuario pueda distinguir claramente el tipo de información que se le brinda, lo que se conoce como efecto pestañas (en inglés, tabs). Lo que sigue es un método muy fácil para crear pestañas con HTML5, CSS3 y jQuery.

Empezaremos con el código HTML5, que consiste en una etiqueta <section class="wrapper"> como contenedor principal. Dentro de ella hay un título <h1> y una lista desordenada <ul class="tabs"> que contiene tres elementos de lista (pestañas) <li> cada uno con un enlace <a href="#tabN">. Los atributos #tab1, #tab2 y #tab3 servirán para relacionar cada pestaña con con el identificador de su correspondiente bloque de contenido.

La capa <div class="clr"> servirá como separador de la lista desordenada y los bloques de contenido.

<body>
<section class="wrapper"> <h1>Tabs with HTML5, CSS3 and jQuery</h1> <ul class="tabs"> <li><a href="#tab1">Pestaña 1</a></li> <li><a href="#tab2">Pestaña 2</a></li> <li><a href="#tab3">Pestaña 3</a></li> </ul> <div class="clr"></div> <section class="block"> <article id="tab1"> <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus hendrerit. Pellentesque aliquet nibh nec urna. In nisi neque, aliquet vel, dapibus id, mattis vel, nisi. Sed pretium, ligula sollicitudin laoreet viverra, tortor libero sodales leo, eget blandit nunc tortor eu nibh. Nullam mollis. Ut justo. Suspendisse potenti. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</p> </article> <article id="tab2"> <p>Sed egestas, ante et vulputate volutpat, eros pede semper est, vitae luctus metus libero eu augue. Morbi purus libero, faucibus adipiscing, commodo quis, gravida id, est. Sed lectus. Praesent elementum hendrerit tortor. Sed semper lorem at felis. Vestibulum volutpat, lacus a ultrices sagittis, mi neque euismod dui, eu pulvinar nunc sapien ornare nisl. Phasellus pede arcu, dapibus eu, fermentum et, dapibus sed, urna.</p> </article> <article id="tab3"> <p>Morbi interdum mollis sapien. Sed ac risus. Phasellus lacinia, magna a ullamcorper laoreet, lectus arcu pulvinar risus, vitae facilisis libero dolor a purus. Sed vel lacus. Mauris nibh felis, adipiscing varius, adipiscing in, lacinia vel, tellus. Suspendisse ac urna. Etiam pellentesque mauris ut lectus. Nunc tellus ante, mattis eget, gravida vitae, ultricies ac, leo. Integer leo pede, ornare a, lacinia eu, vulputate vel, nisl.</p> </article> </section> </section>
</body>

Los bloques de contenido están dentro de otra etiqueta <section class="block"> y consisten en tres etiquetas <article id="tabN">. En este punto resulta obvio que los identificadores tab1, tab2 y tab3 son los elementos que relacionan los bloques de contenido con sus correspondientes pestañas #tab1, #tab2 y #tab3.

El objetivo es que se muestre un bloque de contenido <article id="tabN"> cuando se haga clic sobre su respectiva pestaña <li><a href="#tabN">. Para lograr este efecto haremos uso de la siguiente función jQuery.

01 $(function(){
02 $('ul.tabs li:first').addClass('active');
03  $('.block article').hide();
04  $('.block article:first').show();
05  $('ul.tabs li').on('click',function(){
06    $('ul.tabs li').removeClass('active');
07    $(this).addClass('active')
08    $('.block article').hide();
09    var activeTab = $(this).find('a').attr('href');
10    $(activeTab).show();
11  });
12 })

Expliquemos qué cosa hace cada línea del código.

  • Línea 02: Asignamos la clase "active" al primer elemento de la lista y lo convertimos en la pestaña activa.
  • Línea 03: Ocultamos todos los bloques de contenido <article>.
  • Línea 04: Mostramos solamente el primer bloque de contenido correspondiente a la etiqueta activa.
  • Línea 05: Definimos qué cosa sucede cuando hacemos clic sobre una pestaña.
  • Línea 06: Eliminamos la clase "active" de todas las pestañas, por lo tanto por un instante no habrá ninguna pestaña activa,
  • Línea 07: asignamos la clase "active" a la pestaña seleccionada que será la nueva pestaña activa,
  • Línea 08: ocultamos instantáneamente todos los bloque de contenido,
  • Línea 09: declaramos la variable activeTab que detectará cuál es el atributo #tabN de la pestaña seleccionada y
  • Línea 10: mostraremos el bloque de contenido correspondiente al identificador tabN según el valor de la variable activeTab.

Como vemos, la variable activeTab es imprescindible para determinar cuál es el contenido que se mostrará al hacer clic en cada pestaña.

Lo único que falta es mejorar el aspecto visual mediante la hoja de estilos CSS3.

body {
  background: gray;
  font-family: sans-serif;
}
.wrapper {
  background: white;
  margin: auto;
  padding: 1em;
  width: 50%;
}
h1 {
  text-align: center;
}
ul.tabs {
  list-style-type: none;
  margin: 0;
  padding: 0;
}
ul.tabs li {
  border: gray solid 1px;
  border-bottom: none;
  float: left;
  margin: 0 .25em 0 0;
  padding: .25em .5em;
}
ul.tabs li a {
  color: gray;
  font-weight: bold;
  text-decoration: none;
}
ul.tabs li.active {
  background: gray;
}
ul.tabs li.active a {
  color: white;
}
.clr {
  clear: both;
}
article {
  border-top: gray solid 1px;
  padding: 0 1em;
}

El funcionamiento de las pestañas está a tu disposición en este enlace. Eres libre de modificar los códigos mostrados y adaptarlos según los requerimientos de tu proyecto.

Hasta la próxima. ¡Abur!

César Vargas-Machuca

César Vargas-Machuca

Desarrollador web (front-end). Creador de sitios web adaptables al entorno del usuario (responsive web design) y optimizados para los motores de búsqueda (posicionamiento SEO). Lector frecuente. Apasionado por la buena música. Aprendiz empedernido. Amigo de los animales. Excesivamente puntual. Detesto el spam. Soltero, ayer y hoy. Peruano, ¡siempre!