Sekmeler

Coddy'nin HTML Journey'sinin Practical Frontend bölümünün bir parçası. Ders 21 / 35.

Tabs, her şeyi tek bir sayfada tutarken content öğelerini ayrı bölümlerde düzenlemenin bir yoludur. Kullanıcılar uzun bir sayfayı kaydırmak yerine bir sekmeye tıklayarak content panelleri arasında geçiş yapabilir. Tabs öğelerini ayarlar sayfalarında, panolarda veya ürün açıklamalarında sıkça görürsünüz (ör. Ayrıntılar, İncelemeler, FAQ).

JavaScript kullanmadan şu öğeleri kullanarak sekmeler oluşturabiliriz:

Radio buttons (aynı anda yalnızca bir sekmenin active olabilmesi için)
Tıklanabilir sekme düğmeleri olarak işlev gören labels
Doğru content öğesini göstermek için CSS selectors (:checked)

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>

İşte öğrencilere verebileceğin kısa bir hatırlatma:

+ (bitişik kardeş) → hemen sonraki öğeyi seçer.
~ (genel kardeş) → sonraki herhangi bir kardeşi seçer (yalnızca bir sonrakini değil).

Görev

Kolay

İki sekmesi zaten ayarlanmış başlangıç HTML'i veriliyor. Görevin sekme sistemini genişletmek ve geliştirmektir.

“Sleep” için başka bir sekme ekle:
- Etiket: Sleep
- İçerik: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
İşaretlendiğinde sekme içeriğini gösteren CSS seçicisine #tab3:checked ~ #content3 ekle.

Kendin dene

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