Tab

Termasuk bagian Frontend Praktis dalam perjalanan HTML di Coddy. Pelajaran 21 dari 35.

Tab adalah cara untuk mengatur konten ke dalam bagian-bagian terpisah sambil tetap menampilkan semuanya di satu halaman. Daripada menggulir halaman yang panjang, pengguna dapat berpindah antar panel konten dengan mengeklik tab. Kamu sering melihat tab di halaman pengaturan, dasbor, atau deskripsi produk (misalnya, Detail, Ulasan, FAQ).

Kita bisa membuat tab tanpa JavaScript menggunakan:

Tombol radio (agar hanya satu tab yang aktif pada satu waktu)
Label yang berfungsi sebagai tombol tab yang bisa diklik
Selector CSS (:checked) untuk menampilkan konten yang tepat

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>
  /* Sembunyikan tombol radio */
  input { display: none; }

  /* Label tab */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* Konten disembunyikan secara default */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Tampilkan konten saat tombol radio dipilih */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

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

Berikut pengingat singkat yang bisa kamu sampaikan kepada siswa:

+ (sibling yang berdekatan) → memilih elemen tepat setelahnya.
~ (sibling umum) → memilih sibling mana pun setelahnya (bukan hanya yang berikutnya).

Tantangan

Mudah

Kamu diberi HTML awal dengan dua tab yang sudah disiapkan. Tugasmu adalah mengembangkan dan menyempurnakan sistem tab tersebut.

Tambahkan tab lain untuk “Sleep”:
- Label: Sleep
- Konten: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
Tambahkan #tab3:checked ~ #content3 ke selector CSS yang menampilkan konten tab saat dicentang.

Coba sendiri

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