Tabs

Pestañas de navegación con paneles de contenido intercambiables. JavaScript mínimo (~10 líneas), sin dependencias.

Dependencias JavaScript mínimo (~10 líneas) — sin librerías externas.

Descripción

Un "tab" (o pestaña) es como una carpeta con separadores: hacés click en un título arriba y cambia el contenido de abajo, sin recargar la página. Solo se ve un panel de contenido a la vez.

Sirve para ordenar mucha información sin que la persona tenga que scrollear un montón. Por ejemplo, separar "General", "Detalles" y "Recursos" en la misma pantalla.

Este módulo necesita un poco de JavaScript (unas 10 líneas, ya incluidas en el código de ejemplo). Cuando hacés click en una pestaña, el script le saca la clase active a todos los botones y paneles, y se la pone solo al botón y panel que clickeaste. Así se muestra uno y se esconden los demás.

También incluye atributos ARIA (etiquetas especiales que le explican a los lectores de pantalla cómo funciona algo) como role="tab" y aria-selected, para que personas con lectores de pantalla puedan usar las pestañas sin problema.

La pestaña activa se marca con una línea de color abajo (border-bottom) en vez de un fondo, para un look simple sin agregar elementos extra al HTML.

Para usarlo, pegá el HTML (que ya incluye su propio <script>) donde quieras mostrar las pestañas, y pegá el CSS en tu archivo de estilos o en un <style> dentro del <head>.

HTML

<div class="tabs-wrap">
  <div class="tabs-nav" role="tablist">
    <button class="tab-btn active"
      role="tab"
      aria-selected="true"
      aria-controls="tab-panel-1"
      onclick="switchTab(this, 'tab-panel-1')">
      General
    </button>
    <button class="tab-btn"
      role="tab"
      aria-selected="false"
      aria-controls="tab-panel-2"
      onclick="switchTab(this, 'tab-panel-2')">
      Detalles
    </button>
    <button class="tab-btn"
      role="tab"
      aria-selected="false"
      aria-controls="tab-panel-3"
      onclick="switchTab(this, 'tab-panel-3')">
      Recursos
    </button>
  </div>

  <div class="tab-panel active" id="tab-panel-1" role="tabpanel">
    <h3>Información general</h3>
    <p>Contenido del panel General. Podés poner cualquier
    elemento HTML acá: texto, listas, imágenes, etc.</p>
  </div>

  <div class="tab-panel" id="tab-panel-2" role="tabpanel">
    <h3>Detalles técnicos</h3>
    <p>Contenido del panel Detalles. Este panel está
    oculto por defecto y se muestra al hacer click en la
    pestaña correspondiente.</p>
  </div>

  <div class="tab-panel" id="tab-panel-3" role="tabpanel">
    <h3>Recursos adicionales</h3>
    <p>Contenido del panel Recursos. Ideal para links,
    documentación o archivos descargables.</p>
  </div>
</div>

<script>
function switchTab(btn, panelId) {
  const wrap = btn.closest('.tabs-wrap');
  wrap.querySelectorAll('.tab-btn').forEach(b => {
    b.classList.remove('active');
    b.setAttribute('aria-selected', 'false');
  });
  wrap.querySelectorAll('.tab-panel').forEach(p => p.classList.remove('active'));
  btn.classList.add('active');
  btn.setAttribute('aria-selected', 'true');
  document.getElementById(panelId).classList.add('active');
}
</script>

CSS

/*
|----------------------------------------------------------
| Tabs — Kodeval Pages
| Pestañas de navegación con paneles intercambiables.
| Requiere ~10 líneas de JavaScript (incluidas en HTML).
|----------------------------------------------------------
*/

:root {
  --tabs-border:     #e2e8f0;
  --tabs-bg:         #ffffff;
  --tabs-radius:     14px;
  --tabs-accent:     #5865f2;
  --tabs-text:       #0f172a;
  --tabs-muted:      #64748b;
}

.tabs-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 0;
}

/* Barra de pestañas */
.tabs-nav {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--tabs-border);
  margin-bottom: 1.5rem;
  overflow-x: auto;
  scrollbar-width: none;
}

.tabs-nav::-webkit-scrollbar { display: none; }

/* Botón de cada pestaña */
.tab-btn {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.75rem 1.25rem;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--tabs-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
  font-family: inherit;
}

.tab-btn:hover { color: var(--tabs-text); }

.tab-btn.active {
  color: var(--tabs-accent);
  border-bottom-color: var(--tabs-accent);
  font-weight: 600;
}

/* Panel de contenido */
.tab-panel {
  display: none;
  background: var(--tabs-bg);
  border: 1px solid var(--tabs-border);
  border-radius: var(--tabs-radius);
  padding: 1.75rem;
  animation: fadeTab 0.2s ease;
}

.tab-panel.active { display: block; }

@keyframes fadeTab {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-panel h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--tabs-text);
  margin: 0 0 0.75rem;
}

.tab-panel p {
  font-size: 0.9rem;
  color: var(--tabs-muted);
  line-height: 1.75;
  margin: 0;
}

@media (max-width: 480px) {
  .tab-btn { padding: 0.65rem 0.9rem; font-size: 0.85rem; }
}