לשוניות

חלק מהיחידה JavaScript בפעולה במסלול ה-HTML של Coddy. שיעור 1 מתוך 27.

לשוניות מאפשרות למשתמשים לעבור בין חלקי תוכן שונים מבלי לעזוב את הדף. בסעיף 4 בנינו אותן באמצעות HTML ו-CSS. עכשיו נשתמש ב-JavaScript.

נקודות עיקריות:

אנחנו משתמשים במאפיין התצוגה (none / block) כדי להסתיר ולהציג רכיבים.
כשהמשתמש לוחץ על כרטיסייה, אנחנו קוראים לפונקציה ומעבירים לה את המזהה של הכרטיסייה.

בתוך הפונקציה, אנחנו משתמשים ב-<strong>querySelectorAll</strong> + <strong>forEach</strong> כדי להסתיר את כל תוכני הלשוניות.
לבסוף, אנחנו מציגים את זה שתואם למזהה.

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