Sekmeler

Coddy'nin HTML Journey'sinin Pratik Ön Yüz bölümünün bir parçası. Ders 21 / 35.

Sekmeler, her şeyi tek bir sayfada tutarken içeriği ayrı bölümler hâlinde düzenlemenin bir yoludur. Kullanıcılar uzun bir sayfayı kaydırmak yerine bir sekmeye tıklayarak içerik panelleri arasında geçiş yapabilir. Sekmeleri ayarlar sayfalarında, kontrol panellerinde veya ürün açıklamalarında (ör. Detaylar, Yorumlar, SSS) sıkça görürsünüz.

JavaScript kullanmadan sekmeler oluşturabiliriz:

Radyo düğmeleri (böylece aynı anda yalnızca bir sekme etkin olabilir)
Tıklanabilir sekme düğmeleri gibi davranan etiketler
Doğru içeriği göstermek için CSS seçicileri (: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>