לשוניות

חלק מהיחידה פיתוח Frontend מעשי במסלול ה-HTML של Coddy. שיעור 21 מתוך 35.

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

אפשר ליצור כרטיסיות בלי JavaScript באמצעות:

כפתורי בחירה (כך שרק כרטיסייה אחת יכולה להיות פעילה בכל פעם)
תוויות שמשמשות ככפתורי כרטיסיות שאפשר ללחוץ עליהם
בוררי CSS (:checked) כדי להציג את התוכן המתאים

HTML:

<div class="tabs">
   <input type="radio" id="tab1" name="tab" checked>
   <label for="tab1">Tab 1</label>
   <div id="content1" class="tab-content">This is the content of Tab 1.</div>
   
   <input type="radio" id="tab2" name="tab">
   <label for="tab2">Tab 2</label>
   <div id="content2" class="tab-content">This is the content of Tab 2.</div>
   
   <input type="radio" id="tab3" name="tab">
   <label for="tab3">Tab 3</label>
   <div id="content3" class="tab-content">This is the content of Tab 3.</div>
 </div>

CSS:

<style>
  /* הסתרת כפתורי בחירה */
  input { display: none; }

  /* תוויות הלשוניות */
  label {
    padding: 5px 10px;
    background: lightgray;
    cursor: pointer;
  }

  /* התוכן מוסתר כברירת מחדל */
  .tab-content { display: none; padding: 10px; border: 1px solid #ccc; }

  /* הצגת התוכן כאשר כפתור הבחירה מסומן */
  #tab1:checked ~ #content1,
  #tab2:checked ~ #content2 {
    display: block;
  }

  /* הדגשת הלשונית הפעילה */
  #tab1:checked + label,
  #tab2:checked + label {
    background: steelblue;
    color: white;
  }
</style>

הנה תזכורת קצרה שתוכל לתת לתלמידים:

+ (אח סמוך) → בוחר את האלמנט הבא מיד.
~ (אח כללי) → בוחר כל אח שבא אחריו (לא רק את הבא).

אתגר

קל

ניתן לך קוד HTML התחלתי עם שתי לשוניות שכבר הוגדרו. המשימה שלך היא להרחיב ולשפר את מערכת הלשוניות.

הוסף לשונית נוספת עבור “Sleep”:
- תווית: Sleep
- תוכן: “Good sleep helps recovery and focus. Aim for 7 to 9 hours per night and keep a regular schedule.”
הוסף את #tab3:checked ~ #content3 לבורר ה-CSS שמציג את תוכן הלשונית כשהיא מסומנת.

נסו בעצמכם

<!DOCTYPE html>
<html>
<head>
  <title>Tabs</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      background: #f9f9f9;
    }

    .tabs {
      display: flex;
      flex-direction: column;
      width: 350px;
    }

    /* Hide the radio inputs */
    .tabs input {
      display: none;
    }

    /* Tab labels */
    .tabs label {
      padding: 10px;
      background: #eee;
      cursor: pointer;
      border: 1px solid #ccc;
    }

    .tabs label:hover {
      background: #ddd;
    }

    /* Tab content */
    .tab-content {
      display: none;
      border: 1px solid #ccc;
      padding: 10px;
      background: #fff;
      line-height: 1.5;
    }

    /* Show content when radio is checked */
    #tab1:checked ~ #content1,
    #tab2:checked ~ #content2 {
      display: block;
    }

    /* Highlight active tab */
    #tab1:checked + label,
    #tab2:checked + label,
    #tab3:checked + label {
      background: #4cafef;
      color: white;
    }
  </style>
</head>
<body>
  <div class="tabs">
    <input type="radio" id="tab1" name="tab" checked>
    <label for="tab1">Nutrition</label>
    <div id="content1" class="tab-content">
      <h3>Nutrition</h3>
      <p>A balanced diet fuels your body and mind. Focus on fruits, vegetables, whole grains, and lean proteins. Avoid too much processed food.</p>
    </div>

    <input type="radio" id="tab2" name="tab">
    <label for="tab2">Exercise</label>
    <div id="content2" class="tab-content">
      <h3>Exercise</h3>
      <p>Daily movement strengthens your body and reduces health risks. Even a 30-minute walk or stretching makes a difference.</p>
    </div>

  </div>
</body>
</html>