Pestañas

Parte de la sección Frontend Práctico del Journey de HTML de Coddy. Lección 21 de 35.

Las pestañas son una forma de organizar el contenido en secciones separadas mientras se mantiene 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 ves pestañas en páginas de configuración, paneles o descripciones de productos (por ejemplo, Detalles, Reseñas, Preguntas frecuentes).

Podemos crear pestañas sin JavaScript usando:

Botones de opción (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>
  /* Hide radios */
  input { display: none; }

  /* Tab labels */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Content hidden by default */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

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

  /* Highlight active tab */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Aquí tienes un recordatorio rápido que podrías darles 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á marcada.

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>