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

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

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

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

أزرار الاختيار (بحيث يمكن أن يكون تبويب واحد فقط نشطًا في كل مرة)
تسميات تعمل كأزرار تبويب قابلة للنقر
محدِّدات 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>
  /* 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>

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

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

التحدي

سهل

لديك HTML ابتدائي يحتوي على علامتي تبويب مُعدّتين مسبقًا. مهمتك هي توسيع نظام علامات التبويب وتحسينه.

أضف علامة تبويب أخرى لـ “Sleep”:
- التسمية: Sleep
- المحتوى: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
أضف #tab3:checked ~ #content3 إلى محدد 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>