רכיב טאבים הוא ווידג'ט שבו יש תחילה שורת כפתורים, ומתחתיה כל התכנים, כשבכל זמן נתון רק תוכן אחר פתוח. התכנים נפתחים מתחת לכל הכפתורים כאשר כל כפתור שולט על תוכן אחד.
זה שונה מרכיב אקורדיון עליו דברנו בעבר, שבו הכפתורים נמצאים אחד מתחת לשני, והתוכן נפתח כל אחד מתחת לכפתור שאליו הוא קשור.
HTML בסיסי לטאבים
כמו שכתבנו, קודם כל הכפתורים, ורק אחריהם התכנים. לצורך הקלה על הסקריפטים בהמשך – נעטוף את הכפתורים בנפרד ואת התכנים בנפרד. בנוסף, לכל כפתור ולכל אזור תוכן ID ייעודי. בנוסף לכל כפתור ניתן href עם הID של אזור התוכן שאותו הוא פותח.
בניגוד לאקורדיון שבו ישנה אפשרות שכל האקורדיונים סגורים – בטאבים תמיד יש טאב אחד פתוח. לכן נוסיף את הקלאס אקטיב לכפתור ולתוכן הראשונים.
<div class="tabs_buttons">
<a id="btn_1" href="#content_1" class="active">כותרת ראשונה</a>
<a id="btn_2" href="#content_2">כותרת שניה</a>
<a id="btn_3" href="#content_3">כותרת שלישית</a>
</div>
<div class="tabs_contents">
<div id="content_1" class="active">תוכן טאב ראשון</div>
<div id="content_2">תוכן טאב שני</div>
<div id="content_3">תוכן טאב ראשון</div>
</div>יצירת הHTML לטאבים באמצעות לולאה בקוד PHP
שימו לב שאם הHTML שלכם מצוייר בשפת צד שרת כלשהי, תוך ריצה בלולאה על מערך נתונים (לדוגמה שליפת נתונים מתוך וורדפרס) – אין צורך לרוץ בשתי לולאות – אחת לכפתורים ואחת לתוכן, אלא לפני תחילת הלולאה נאפס מספר משתנים – output_tabs, output_content, i, active, ואז נשחק באופן הבא (הדוגמה שלהלן היא בשפת PHP):
$output_tabs = $output_content = '';
$i = 1;
$active = 'active';
foreach($array as $row) {
$title = $row['title']; // כאן נכניס את הכותרת של הטאב. זה יכול להיות גם HTML מורכב יותר, ולא סתם טקסט
$content = $row['content']; // כאן נכניס את תוכן הטאב, גם כאן - זה יכול להיות HTML מורכב ולא סתם טקסט
$output_tabs .= "<a id='tabs_btn_$i' href='tabs_content_$i' class='$active'>$title</a>";
$output_content .= "<div id='tabs_content_$i' class='$active'>$content</div>";
$active = ''; // כך בריצה הבאה של הלולאה - לא יהיה קלאס אקטיב לרכיבים
$i++; // קידום המונה שלנו, כדי שלכל טאב ותוכן יהיה אותו מספר
}
קוד CSS בסיסי
העיצוב של הטאבים ושל אזורי התוכן יהיה לפי העיצוב הנדרש. הדבר היחיד שהינו חובה הוא הסתרת כל אזורי התוכן שאינם פעילים. יש מספר דרכים לעשות את זה, וההגדרה שנבחר בה תלויה באיזור אנימציה נבחר לממש למעבר בין טאבים. נתחיל מהבסיס – display none. בשלב הוספת האנימציות – נשחק גם עם ההגדרה הזו.
קוד הJS למעבר בין טאבים
מה שצריך להיות כאן הוא אירוע לחיצה על כפתור. באותו אירוע בודקים את איזה איזור תוכן צריך לפתוח, סוגרים את מה שפתוח ופותחים את האיזור הנכון. בנוסף נרצה לתת גם active לכפתור שעליו לחצו, על מנת להחיל עליו הגדרות עיצוביות.