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

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

تتيح علامات التبويب للمستخدمين التبديل بين أجزاء مختلفة من المحتوى دون مغادرة الصفحة. يمكنك إنشاؤها باستخدام 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">
    <!-- يستدعي كل زر الدالة ويمرّر إليها ID الخاص بعلامة التبويب -->
    <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>