Un sistema de pestañas es utilizado con muchos fines y es bien visto especialmente en móviles. En este tutorial estaremos utilizando HTML, TailwindCSS y Javascript como las tecnologías principales.

Primero analicemos el documento de HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>

  <title>Tabs con HTML CSS & JS</title>
</head>
<body>
  <header>
    <nav>
      <ul class="flex">
        <li id="select-tab" class="mr-4 p-2 cursor-pointer hover:bg-blue-100 bg-blue-200">Tab 1</li>
        <li id="select-tab" class="mr-4 p-2 cursor-pointer hover:bg-blue-100">Tab 2</li>
        <li id="select-tab" class="mr-4 p-2 cursor-pointer hover:bg-blue-100">Tab 3</li>
        <li id="select-tab" class="mr-4 p-2 cursor-pointer hover:bg-blue-100">Tab 4</li>
        <li id="select-tab" class="mr-4 p-2 cursor-pointer hover:bg-blue-100">Tab 5</li>
      </ul>
    </nav>
  </header>
  <section id="select-content" class="h-40 bg-blue-200 p-2 text-4xl flex items-center justify-center">
    Tab 1
  </section>
    <section id="select-content" class="h-40 bg-blue-200 p-2 text-4xl flex items-center justify-center hidden">
    Tab 2
  </section>
    <section id="select-content" class="h-40 bg-blue-200 p-2 text-4xl flex items-center justify-center hidden">
    Tab 3
  </section>
    <section id="select-content" class="h-40 bg-blue-200 p-2 text-4xl flex items-center justify-center hidden">
    Tab 4
  </section>
    <section id="select-content" class="h-40 bg-blue-200 p-2 text-4xl flex items-center justify-center hidden">
    Tab 5
  </section>

  <script src="/tabs.js"></script>
</body>
</html>

Fijémonos en la etiqueta <nav> que contiene un listado donde estarán ubicadas las pestañas. Cada pestaña consiste de un elemento <li> y le añadimos un id select-tab. Luego estaremos utilizando estos id's con javascript para crear un arreglo y hacer las pestañas activas de manera dinámica. En estos momentos solo el tab1 parece estar activo por defecto con el estilo aplicado de tailwindcss.

Ahora fijémonos en los elementos de contenido creados con una etiqueta <section>. Aunque existen 5 elementos de esta clase, solo está visible el tab1 debido a que los otros elementos contienen la clase hidden de tailwindcss que hace que los elementos no se vean porque es el equivalente a un:

section{
  display: none;
}

De la misma manera cada elemento <section> de contenido tiene un id para posteriormente iterar con javascript y mostrar el contenido que corresponde a la pestaña. Esto hace que hasta el momento la aplicación muestre lo siguiente:

Ahora pasemos hacer la parte de javascript para activar las pestañas. El siguiente código hace lo mencionado:

const tabsArray = Array.from(document.querySelectorAll("#select-tab"))

tabsArray.forEach(tab => {
  tab.addEventListener('click', () => {
    // elegir el elemento
    target = tab

    // loopear sobre todos los elementos y quitarle el fondo activo
    tabsArray.forEach(t => {
      t.classList.remove('bg-blue-200')
    })

    target.classList.add('bg-blue-200')
  })
})

El código anterior hace lo siguiente:

Crea un arreglo (array) de las pestañas utilizando el id #select-tab
Utiliza un método de arreglo llamado forEach para iterar en el arreglo con un evento click.
Con cada click se itera nuevamente todas las pestañas para remover el estilo activo que en este caso es un bg-blue-200 obtenido de tailwindcss
Luego se le aplica el estilo a la pestaña que estamos dando click

Eso es todo. Ahora pasemos a la parte de mostrar el contenido de acuerdo a la pestaña que estamos dando click.

const tabsArray = Array.from(document.querySelectorAll("#select-tab"))


const contentArray = Array.from(document.querySelectorAll('#select-content'))


tabsArray.forEach(tab => {
  tab.addEventListener('click', () => {
    // elegir el elemento
    target = tab


    // loopear sobre todos los elementos y quitarle el fondo activo
    tabsArray.forEach(t => {
      t.classList.remove('bg-blue-200')
    })

    const currentTab = tabsArray.indexOf(target)
    
    contentArray.forEach(content => {
      if(contentArray.indexOf(content) === currentTab){
        content.classList.remove('hidden')
      } else if(contentArray.indexOf(content) !== currentTab){
        content.classList.add('hidden')
      }
    })

    target.classList.add('bg-blue-200')
  })
})

En el código anterior hemos creado un arreglo de las secciones de contenido de la misma manera que hicimos con las pestañas, pero ahora determinaremos mostrar el contenido que se encuentre en la misma posición del arreglo de las pestañas. El currentTab determina la posición de la pestaña que estamos dando click. Luego iteramos por el arreglo de contenido y decidimos añadir la clase de hidden a los elementos que no estén en la misma posición que la pestaña, y la removemos en aquél elemento que si esté en la misma posición que la pestaña.

En este momento ya debes tener un sistema de pestañas funcional y listo para editarlo a tu gusto y tus metas. No olvides suscribirte a mi canal de YouTube y mirar el video a continuación para entender mejor.

Javascript

¿Cómo crear un sistema de pestañas con tailwindcss y javascript?

Comparte este contenido