Abas

Parte da seção Practical Frontend do Journey de HTML da Coddy — lição 21 de 35.

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

Podemos criar abas sem JavaScript usando:

Botões de rádio (para que apenas uma aba possa estar ativa por vez)
Rótulos (labels) que funcionam como botões de aba clicáveis
Seletores CSS (:checked) para mostrar 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ê pode 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

Você recebeu um HTML inicial com duas abas já configuradas. Sua tarefa é expandir e melhorar o sistema de abas.

Adicione outra aba para “Sleep”:
- Rótulo: Sleep
- Conteúdo: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Adicione #tab3:checked ~ #content3 ao seletor CSS que mostra o conteúdo da aba quando selecionada.

Folha de consulta

Crie abas sem JavaScript usando botões de rádio, rótulos e seletores CSS:

Estrutura 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 Funcionalidade de Abas:

/* Esconder botões de rádio */
input { display: none; }

/* Estilizar rótulos das abas */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

/* Esconder conteúdo por padrão */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* Mostrar conteúdo quando o rádio estiver marcado */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Destacar aba ativa */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

Seletores de Irmãos CSS:

+ (irmão adjacente) → seleciona o elemento imediatamente seguinte
~ (irmão geral) → seleciona qualquer elemento irmão seguinte

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>