• Josetxu.com
  • Perfil
  • Portafolio
  • Iconos
  • Demos
  • Blog
Blog · Josetxu.com

Crear pestañas de contenido o ‘tabs’ fácilmente con javascript

Publicada en 12 ago 2020 de Josetxu

Las pestañas de contenido ó tabs son uno de los recursos más utilizados para organizar los contenidos web. En este artículo veremos una manera fácil de crear grupos de pestañas con Javascript puro, basándonos en una estructura HTML predefinida.


El HTML específico, una función Javascript, y un puñado de CSS es todo lo que necesitamos

HTML

Para crear un grupo de pestañas usaremos la siguiente estructura HTML con sus respectivas clases:

  • Añadimos o eliminamos elementos li con la clase t-tab , uno por cada pestaña deseada.
  • Añadimos o eliminamos elementos li con la clase t-content , uno por cada pestaña creada.
  • Asegúrate de que los pares de elementos li de cada grupo de pestañas son los mismos.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<div class="t-container">
  <ul class="t-tabs">  
    <li class="t-tab">Uno</li>  
    <li class="t-tab">Dos</li>
    <li class="t-tab">Tres</li>  
  </ul>
  <ul class="t-contents">
    <li class="t-content"><p>Contenido Uno</p></li>
    <li class="t-content"><p>Contenido Dos</p></li>
    <li class="t-content"><p>Contenido Tres</p></li>
  </ul>
</div>

  • Uno
  • Dos
  • Tres
  • Contenido Uno

  • Contenido Dos

  • Contenido Tres

Ya tenemos la estructura HTML, vamos a vestirla con algo de CSS…

CSS

Añadimos unos estilos CSS para darle forma al grupo de pestañas que acabamos de crear.

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
52
53
54
55
56
.t-container {
  margin: 0 auto;
  padding: 0 2em;
}
.t-tabs, .t-contents {
  list-style-type: none;
  margin: 0;
  padding: 0 2% 0 2%;
  box-sizing: border-box;
}
.t-tabs li {
  color: #dedede;
  padding: 0.5em 0.7em;
  text-decoration: none;
  float: left;
  text-align: center;
  font-size: 1.1em;
  background: #717171;
  border-bottom: 0;
  min-width: 40px;
  margin-right: 2px;
  margin-bottom: 0 !important;
  box-sizing: border-box;
  cursor: pointer;
}
.t-tabs li:hover {
  background-color: #545454;
  color: #d2d2d2;
}
.t-tabs li.selected {
  color: #458ace;
  cursor: default;
  background: #333;
}
.t-contents {
  padding: 0 !important
}
.t-content {
  padding: 0 1em;
  background-color: #333;
  box-sizing: border-box;
  float: left;
  width: 100%;
  color: #b7b7b7;
  line-height: 1.3em;
  text-align: justify;
  z-index: 1;
  position: relative;
  max-height: 0;
  transition: max-height 0.5s ease 0s;
  overflow: hidden;
}
.t-content.selected {
  max-height: 3000px;
  transition: max-height 1.25s ease 0.5s;
}

  • Uno
  • Dos
  • Tres
  • Contenido Uno

  • Contenido Dos

  • Contenido Tres

Esto va tomando forma, pero las pestañas siguen sin funcionar…

Vamos ya con la función Javascript…

Javascript

La función easyTabs() es la que hace todo el trabajo y monta la estructura definitiva de nuestro grupo de pestañas:

JavaScript
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
function easyTabs() {
  var groups = document.querySelectorAll('.t-container');
  if (groups.length > 0) {
    for (i = 0; i < groups.length; i++) {
      var tabs = groups[i].querySelectorAll('.t-tab');
      for (t = 0; t < tabs.length; t++) {
        tabs[t].setAttribute("index", t+1);
        if (t == 0) tabs[t].className = "t-tab selected";
      }
      var contents = groups[i].querySelectorAll('.t-content');
      for (c = 0; c < contents.length; c++) {
        contents[c].setAttribute("index", c+1);
        if (c == 0) contents[c].className = "t-content selected";
      }
    }
    var clicks = document.querySelectorAll('.t-tab');
    for (i = 0; i < clicks.length; i++) {
      clicks[i].onclick = function() {
        var tSiblings = this.parentElement.children;
        for (i = 0; i < tSiblings.length; i++) {
          tSiblings[i].className = "t-tab";
        }
        this.className = "t-tab selected";
        var idx = this.getAttribute("index");
        var cSiblings = this.parentElement.parentElement.querySelectorAll('.t-content');
        for (i = 0; i < cSiblings.length; i++) {
          cSiblings[i].className = "t-content";
          if (cSiblings[i].getAttribute("index") == idx) {
            cSiblings[i].className = "t-content selected";
          }
        }
      };
    }
  }
}

La función, explicada linea a linea, trabaja de la siguiente manera:

  1. Nombre de la función: easyTabs
  2.  Variable groups: con todos los elementos con la clase .t-container
  3.  Condicional if: si la propiedad length de la variable groups es mayor de cero
  4.   Bucle for: que recorre cada elemento de la variable groups
  5.    Variable tabs: con todos los elementos con la clase .t-tab dentro de ese grupo
  6.    Bucle for: que recorre cada elemento de la variable tabs
  7.     Se asigna el atributo index con valor incremental a cada elemento con clase .t-tab
  8.     Condicional if: si es el primero se le añade la clase .selected
  9.    Cierre de for linea 6
  10.    Variable contents: con todos los elementos con la clase .t-contents dentro de ese grupo
  11.    Bucle for: que recorre cada elemento de la variable contents
  12.     Se asigna el atributo index con valor incremental a cada elemento con clase .t-content
  13.     Condicional if: si es el primero se le añade la clase .selected
  14.    Cierre de for linea 11
  15.   Cierre de for linea 4
  16.   Variable clicks: con todos los elementos con la clase .t-tab
  17.   Bucle for: que recorre cada elemento de la variable clicks
  18.    Al hacer clic en cada elemento de la variable clicks
  19.     Variable tSiblings: con todos los elementos hermanos del elemento clicado
  20.     Bucle for: para cada uno de los elementos de la variable tSiblings
  21.      Eliminamos la clase .selected
  22.     Cierre de for linea 20
  23.     Añadimos la clase .selected al elemento en el que hemos hecho clic
  24.     Variable idx: valor del atributo index del elemento en el que hemos hecho clic
  25.     Variable cSiblings: con todos los elementos con clase .t-content de ese grupo
  26.     Bucle for: para cada uno de los elementos de la variable cSiblings
  27.      Eliminamos la clase .selected
  28.      Condicional if: si el valor del atributo index del elemento es igual a la variable idx
  29.        Añadimos la clase .selected al elemento
  30.       Cierre de if linea 28
  31.     Cierre de for linea 26
  32.    Cierre clic en clicks linea 18
  33.   Cierre de for linea 17
  34.  Cierre de if linea 3
  35. Cierre de la función easyTabs linea 1

 
 

Solo nos queda llamar a la función easyTabs() cuando el HTML del documento esté cargado. La función buscará los grupos de pestañas y los convertirá en pestañas funcionales:

JavaScript
1
2
3
(function() {
  easyTabs();
})();

Resultado

Y listo, ya podemos crear grupos de pestañas de manera rápida y simple usando la estructura HTML predeterminada, y rellenándola con nuestros propios contenidos.

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
<div class="t-container">
  <ul class="t-tabs">  
    <li class="t-tab">Uno</li>  
    <li class="t-tab">Dos</li>
    <li class="t-tab">Tres</li>  
  </ul>
  <ul class="t-contents">
    <li class="t-content"><p>Contenido Uno</p></li>
    <li class="t-content"><p>Contenido Dos</p></li>
    <li class="t-content"><p>Contenido Tres</p></li>
  </ul>
</div>

  • Uno
  • Dos
  • Tres
  • Contenido Uno

  • Contenido Dos

  • Contenido Tres

Más ejemplos:

XHTML
1
2
3
4
5
6
7
8
9
10
<div class="t-container">
  <ul class="t-tabs">  
    <li class="t-tab">Alfa</li>
    <li class="t-tab">Beta</li>
  </ul>
  <ul class="t-contents">
    <li class="t-content"><p>Contenido para pestaña Alfa.</p></li>
    <li class="t-content"><p>Contenido para pestaña Beta.</p></li>
  </ul>
</div>

  • Alfa
  • Beta
  • Contenido para pestaña Alfa.

  • Contenido para pestaña Beta.

Otro ejemplo con cuatro pestañas:

XHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="t-container">
  <ul class="t-tabs">  
    <li class="t-tab">Rojo</li>
    <li class="t-tab">Verde</li>
    <li class="t-tab">Azul</li>
    <li class="t-tab">Amarillo</li>
  </ul>
  <ul class="t-contents">  
    <li class="t-content"><p>Contenido para pestaña Rojo.</p></li>
    <li class="t-content"><p>Contenido para pestaña Verde.</p></li>
    <li class="t-content"><p>Contenido para pestaña Azul.</p></li>
    <li class="t-content"><p>Contenido para pestaña Amarillo.</p></li>
  </ul>
</div>

  • Rojo
  • Verde
  • Azul
  • Amarillo
  • Contenido para pestaña Rojo.

  • Contenido para pestaña Verde.

  • Contenido para pestaña Azul.

  • Contenido para pestaña Amarillo.

Pros y Contras

  • Se pueden crear infinitas pestañas dentro de cada grupo.
  • Se pueden crear múltiples grupos de pestañas en la misma página.
  • No se puede anidar un grupo de pestañas dentro de otro grupo de pestañas.

Demo

Ver Pestañas Fáciles con Javascript por Josetxu (@josetxu) en CodePen.13351

Para ver la demo más grande haz clic en el siguiente botón: ver demo grande

Publicado en: Javascript | Etiquetas: Funciones, Métodos |
« Funciones básicas en PHP: [include()] y [require()]
»

Artículos Relacionados

  • Afinador de Guitarra – Online Guitar TunerAfinador de Guitarra – Online Guitar Tuner
  • Funciones básicas en Javascript: [alert()] y [prompt()]Funciones básicas en Javascript: [alert()] y [prompt()]
  • Método [getElementById] de JavascriptMétodo [getElementById] de Javascript
  • Estructura básica de una función JavascriptEstructura básica de una función Javascript
  • Efecto “Before / After” Responsive Efecto “Before / After” Responsive
josetxu Josetxu López

Diseñador y programador web multidisciplinar y autodidacta.
Investigo las posibilidades que nos ofrece la tecnología aprendiendo algo nuevo cada día. La curiosidad y la paciencia me han enseñado casi todo lo que sé...

Buscar

Categorías

  • CSS (7)
  • CSS3 (7)
  • HTML (4)
  • HTML5 (3)
  • Javascript (8)
  • JQuery (1)
  • PHP (6)

Etiquetas

Animación Audio Básico Captcha Clases Constructores Formularios Funciones Iconos Imagen JSON Métodos Responsive

Recientes

Funciones básicas en PHP: [include()] y [require()]
Funciones básicas en PHP: [include()] y [require()]
Iconos con CSS
Iconos con CSS
Aplicar estilos CSS a campos [radio] y [checkbox]
Aplicar estilos CSS a campos [radio] y [checkbox]
Captcha en PHP
Captcha en PHP

Utilidades

Color Picker w3c Selector de color Google Fonts google Fuentes de Google Can I use @Fyrd Soporte por navegadores Gimp gimp Manipulación de imágenes Notepad++ notepad++ Editor de código W3C Validator w3c Validador de código Highcharts highchartsGráficas en Javascript

Aviso

La información contenida en este blog es solo orientativa . No soy profesor, solo un tio curioso que quiere compartir lo aprendido durante estos años.

CyberChimps WordPress Themes

josetxu.comJosetxu.com Perfil | Portafolio | Iconos | Demos | Blog 2000 - 2020 © josetxu.com
▲