علامات التبويب

جزء من قسم Practical Frontend في رحلة HTML على Coddy — الدرس 21 من 35.

تُعد علامات التبويب وسيلة لتنظيم المحتوى في أقسام منفصلة مع إبقاء كل شيء في صفحة واحدة. فبدلاً من التمرير في صفحة طويلة، يمكن للمستخدمين التبديل بين لوحات المحتوى عن طريق النقر فوق علامة تبويب. غالباً ما تشاهد علامات التبويب في صفحات الإعدادات أو لوحات التحكم أو أوصاف المنتجات (على سبيل المثال، التفاصيل، المراجعات، الأسئلة الشائعة).

يمكننا إنشاء تبويبات بدون JavaScript باستخدام:

أزرار الاختيار (Radio buttons) (بحيث يمكن تنشيط تبويب واحد فقط في كل مرة)
التسميات (Labels) التي تعمل كأزرار تبويب قابلة للنقر
محددات CSS (: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>
  /* إخفاء أزرار الاختيار */
  input { display: none; }

  /* تسميات علامات التبويب */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* المحتوى مخفي افتراضيًا */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* إظهار المحتوى عند تحديد زر الاختيار */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* تمييز علامة التبويب النشطة */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

إليك تذكير سريع يمكنك تقديمه للطلاب:

+ (العنصر الشقيق المجاور) ← يحدد العنصر التالي مباشرة.
~ (العنصر الشقيق العام) ← يحدد أي عنصر شقيق تالٍ (ليس فقط العنصر التالي مباشرة).

التحدي

سهل

لقد تم تزويدك بكود HTML أولي يحتوي على علامتي تبويب (tabs) تم إعدادهما بالفعل. مهمتك هي توسيع وتحسين نظام علامات التبويب هذا.

أضف علامة تبويب أخرى لـ “Sleep”:
- التسمية (Label): Sleep
- المحتوى: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
أضف #tab3:checked ~ #content3 إلى محدد CSS (CSS selector) الذي يظهر محتوى علامة التبويب عند تحديدها.

ورقة مرجعية

قم بإنشاء تبويبات (tabs) بدون استخدام JavaScript باستخدام أزرار الاختيار (radio buttons)، والتسميات (labels)، ومحددات CSS:

هيكل HTML:

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

CSS لوظائف التبويب:

/* Hide radio buttons */
input { display: none; }

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

/* Hide content 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;
}

محددات الأشقاء في CSS:

+ (الشقيق المجاور) ← يختار العنصر التالي مباشرة
~ (الشقيق العام) ← يختار أي عنصر شقيق يليه

جرّب بنفسك

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