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

جزء من قسم JavaScript قيد التطبيق في رحلة HTML على Coddy. الدرس 1 من 27.

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

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

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

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

<div class="tabs">
  <button class="tab" onclick="openTab('services')">Services</button>
  <button class="tab" onclick="openTab('contact')">Contact</button>
</div>

<div id="services" class="tab-content">Our services are listed here.</div>
<div id="contact" class="tab-content" style="display:none;">Contact us at contact@example.com.</div>

<script>
  function openTab(tabId) {
    // Hide all tab contents
    document.querySelectorAll('.tab-content').forEach(el => el.style.display = 'none');
    // Show the selected tab
    document.getElementById(tabId).style.display = 'block';
  }
</script>

التحدي

سهل

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

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

جرّب بنفسك

<!DOCTYPE html>
<html>
<head>
  <title>Simple Tabs Example</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="tabs">
    <!-- يستدعي كل زر الدالة ويمرّر إليها معرّف علامة التبويب -->
    <button class="tab" >Home</button>
    <button class="tab" >About</button>
    <button class="tab" >Contact</button>
  </div>

  <!-- افتراضيًا، تظهر "Home" فقط -->
  <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>