Sekmeler

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

Sekmeler, her şeyi tek bir sayfada tutarken içeriği ayrı bölümlere ayırmanın bir yoludur. Uzun bir sayfayı kaydırmak yerine, kullanıcılar bir sekmeye tıklayarak içerik panelleri arasında geçiş yapabilirler. Sekmeleri genellikle ayarlar sayfalarında, panellerde veya ürün açıklamalarında görürsünüz (örneğin, Detaylar, Yorumlar, SSS).

JavaScript kullanmadan şu yöntemlerle sekmeler oluşturabiliriz:

Radyo düğmeleri (böylece aynı anda yalnızca bir sekme aktif olabilir)
Tıklanabilir sekme düğmeleri olarak işlev gören etiketler (labels)
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>
  /* Radyo düğmelerini gizle */
  input { display: none; }

  /* Sekme etiketleri */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* İçerik varsayılan olarak gizlidir */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* Radyo düğmesi seçildiğinde içeriği göster */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* Aktif sekmeyi vurgula */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

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

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

Görev

Kolay

Size iki sekmesi halihazırda ayarlanmış başlangıç HTML'i verilmiştir. Göreviniz sekme sistemini genişletmek ve geliştirmektir.

“Sleep” için başka bir sekme ekleyin:
- 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 ifadesini ekleyin.

Kopya kağıdı

Radyo düğmeleri, etiketler ve CSS seçicileri kullanarak JavaScript olmadan sekmeler oluşturun:

HTML Yapısı:

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

Sekme İşlevselliği için CSS:

/* Radyo düğmelerini gizle */
input { display: none; }

/* Sekme etiketlerini stillendir */
label {
  padding: 5px 10px;
  background: lightgray;
  cursor: pointer;
}

/* İçeriği varsayılan olarak gizle */
.tab-content { 
  display: none; 
  padding: 10px; 
  border: 1px solid #ccc; 
}

/* Radyo düğmesi seçildiğinde içeriği göster */
#tab1:checked ~ #content1,
#tab2:checked ~ #content2 {
  display: block;
}

/* Aktif sekmeyi vurgula */
#tab1:checked + label,
#tab2:checked + label {
  background: steelblue;
  color: white;
}

CSS Kardeş Seçiciler:

+ (bitişik kardeş) → hemen sonraki öğeyi seçer
~ (genel kardeş) → sonraki herhangi bir kardeş öğeyi seçer

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>