לשוניות

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

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

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

אנחנו משתמשים במאפיין display (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>