Abas

Parte da seção Frontend Prático do Journey de HTML da Coddy. Lição 21 de 35.

As guias são uma forma de organizar o conteúdo em seções separadas, mantendo tudo em uma única página. Em vez de rolar por uma página longa, os usuários podem alternar entre painéis de conteúdo clicando em uma guia. Você costuma ver guias em páginas de configurações, painéis ou descrições de produtos (por exemplo, Detalhes, Avaliações, FAQ).

Podemos criar abas sem JavaScript usando:

Botões de opção (para que apenas uma aba possa estar ativa por vez)
Rótulos que funcionam como botões de aba clicáveis
Seletores CSS (:checked) para exibir o conteúdo correto

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>

Aqui está um lembrete rápido que você poderia dar aos alunos:

+ (irmão adjacente) → seleciona o elemento imediatamente seguinte.
~ (irmão geral) → seleciona qualquer irmão seguinte (não apenas o próximo).

Desafio

Fácil

Tu tarea es ampliar y mejorar el sistema de pestañas a partir del HTML inicial, que ya tiene dos pestañas configuradas.

Agrega 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.”
Agrega #tab3:checked ~ #content3 al selector CSS que exibe o conteúdo da aba quando ela está marcada.

Experimente você mesmo

<!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>