Pestañas

Parte de la sección Practical Frontend del Journey de HTML de Coddy — lección 21 de 35.

Las pestañas son una forma de organizar el contenido en secciones separadas manteniendo todo en una sola página. En lugar de desplazarse por una página larga, los usuarios pueden cambiar entre paneles de contenido haciendo clic en una pestaña. A menudo se ven pestañas en páginas de configuración, paneles de control o descripciones de productos (por ejemplo, Detalles, Reseñas, Preguntas frecuentes).

Podemos crear pestañas sin JavaScript usando:

Botones de radio (para que solo una pestaña pueda estar activa a la vez)
Etiquetas que actúan como botones de pestaña en los que se puede hacer clic
Selectores CSS (:checked) para mostrar el contenido correcto

HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">This is the content of Tab 1.</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">This is the content of Tab 2.</div>
   
   <input type="radio" id="tab3" name="tab">
   <label for="tab3">Tab 3</label>
   <div id="content3" class="tab-content">This is the content of Tab 3.</div>
 </div>

CSS:

<style>
  /* Ocultar radios */
  input { display: none; }

  /* Etiquetas de las pestañas */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Contenido oculto por defecto */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Mostrar contenido cuando el radio está marcado */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Resaltar la pestaña activa */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Aquí tienes un recordatorio rápido que podrías dar a los estudiantes:

+ (hermano adyacente) → selecciona el elemento inmediatamente siguiente.
~ (hermano general) → selecciona cualquier hermano posterior (no solo el siguiente).

Desafío

Fácil

Se te proporciona un HTML inicial con dos pestañas ya configuradas. Tu tarea es ampliar y mejorar el sistema de pestañas.

Añade otra pestaña para “Sleep”:
- Etiqueta: Sleep
- Contenido: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Añade #tab3:checked ~ #content3 al selector CSS que muestra el contenido de la pestaña cuando está seleccionada.

Hoja de referencia

Crea pestañas sin JavaScript usando botones de radio, etiquetas y selectores CSS:

Estructura HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">Content for Tab 1</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">Content for Tab 2</div>
</div>

CSS para la funcionalidad de las pestañas:

/* Ocultar botones de radio */
input { display: none; }

/* Estilo de las etiquetas de las pestañas */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

/* Ocultar contenido por defecto */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* Mostrar contenido cuando el radio está seleccionado */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Resaltar pestaña activa */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

Selectores de hermanos en CSS:

+ (hermano adyacente) → selecciona el elemento inmediatamente siguiente
~ (hermano general) → selecciona cualquier elemento hermano posterior

Pruébalo tú mismo

<!DOCTYPE html>
<html>
<head>
  <title>Tabs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }

    .tabs {
      display: flex;
      flex-direction: column;
      width: 350px;
    }

    /* Hide the radio inputs */
    .tabs input {
      display: none;
    }

    /* Tab labels */
    .tabs label {
      padding: 10px;
      background: #eee;
      cursor: pointer;
      border: 1px solid #ccc;
    }

    .tabs label:hover {
      background: #ddd;
    }

    /* Tab content */
    .tab-content {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background: #fff;
      line-height: 1.5;
    }

    /* Show content when radio is checked */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2 {
      display: block;
    }

    /* Highlight active tab */
    #tab1:checked + label,
    #tab2:checked + label,
    #tab3:checked + label {
      background: #4cafef;
      color: white;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">Nutrition</label>
    <div id="content1" class="tab-content">
      <h3>Nutrition</h3>
      <p>A balanced diet fuels your body and mind. Focus on fruits, vegetables, whole grains, and lean proteins. Avoid too much processed food.</p>
    </div>

    <input type="radio" id="tab2" name="tab">
    <label for="tab2">Exercise</label>
    <div id="content2" class="tab-content">
      <h3>Exercise</h3>
      <p>Daily movement strengthens your body and reduces health risks. Even a 30-minute walk or stretching makes a difference.</p>
    </div>

  </div>
</body>
</html>