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

جزء من قسم JavaScript in Action في رحلة HTML على Coddy — الدرس 1 من 27.

تسمح علامات التبويب (Tabs) للمستخدمين بالتبديل بين أجزاء مختلفة من المحتوى دون مغادرة الصفحة. في القسم 4، قمنا ببنائها باستخدام HTML و CSS. الآن سنستخدم JavaScript.

النقاط الرئيسية:

نحن نستخدم خاصية display (none / block) لإخفاء وإظهار العناصر.
عندما ينقر المستخدم على علامة تبويب، نقوم باستدعاء الدالة ونقوم بتمرير معرف (ID) علامة التبويب.

داخل الدالة، نستخدم <strong>querySelectorAll</strong> + <strong>forEach</strong> لإخفاء جميع محتويات التبويبات.
أخيرًا، نقوم بإظهار العنصر الذي يطابق الـ ID.

<div class="tabs">
  <button class="tab" onclick="openTab('services')">الخدمات</button>
  <button class="tab" onclick="openTab('contact')">اتصل بنا</button>
</div>

<div id="services" class="tab-content">خدماتنا مدرجة هنا.</div>
<div id="contact" class="tab-content" style="display:none;">اتصل بنا على contact@example.com.</div>

<script>
  function openTab(tabId) {
    // إخفاء كافة محتويات التبويبات
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    // إظهار التبويب المحدد
    document.getElementById(tabId).style.display = 'block';
  }
</script>

التحدي

سهل

لقد قمنا بالفعل بكتابة وظيفة JavaScript التي تجعل علامات التبويب تعمل. مهمتك هي:

أضف سمة onclick إلى كل زر من أزرار علامات التبويب بحيث يؤدي النقر فوق علامة التبويب إلى إظهار المحتوى الصحيح
استدعِ الوظيفة openTab().
قم بتمرير id الخاص بمحتوى علامة التبويب (home، أو about، أو contact).

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Simple Tabs Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tabs">
    <!-- Each button calls the function and passes the tab's ID -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- By default, only "Home" is visible -->
  <div id="home" class="tab-content">Welcome to the homepage!</div>
  <div id="about" class="tab-content" style="display:none;">Learn more about us here.</div>
  <div id="contact" class="tab-content" style="display:none;">Get in touch with us.</div>

  <script src="script.js"></script>
</body>
</html>