Schede

Fa parte della sezione Frontend pratico del percorso HTML di Coddy. Lezione 21 di 35.

Le schede sono un modo per organizzare i contenuti in sezioni separate mantenendo tutto su un'unica pagina. Invece di scorrere una pagina lunga, gli utenti possono passare da un pannello di contenuti all'altro facendo clic su una scheda. Spesso trovi schede nelle pagine delle impostazioni, nei dashboard o nelle descrizioni dei prodotti (ad es., Dettagli, Recensioni, FAQ).

Possiamo creare schede senza JavaScript usando:

Pulsanti di opzione (in modo che possa essere attiva una sola scheda alla volta)
Etichette che fungono da pulsanti di scheda cliccabili
Selettori CSS (:checked) per mostrare il contenuto corretto

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>
  /* Nascondi i pulsanti di opzione */
  input { display: none; }

  /* Etichette delle schede */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Contenuto nascosto per impostazione predefinita */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Mostra il contenuto quando il pulsante di opzione è selezionato */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Evidenzia la scheda attiva */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

Ecco un rapido promemoria che potresti dare agli studenti:

+ (fratello adiacente) → seleziona l’elemento immediatamente successivo.
~ (fratello generico) → seleziona qualsiasi elemento fratello successivo (non solo quello successivo).

Sfida

Facile

Ti viene fornito HTML iniziale con due schede già configurate. Il tuo compito è ampliare e migliorare il sistema di schede.

Aggiungi un'altra scheda per “Sleep”:
- Etichetta: Sleep
- Contenuto: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Aggiungi #tab3:checked ~ #content3 al selettore CSS che mostra il contenuto della scheda quando è selezionata.

Provalo tu

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