בניית רכיב טאבים באמצעות jQuery וCSS

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

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

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>

קוד CSS בסיסי

העיצוב של הטאבים ושל אזורי התוכן יהיה לפי העיצוב הנדרש. הדבר היחיד שהינו חובה הוא הסתרת כל אזורי התוכן שאינם פעילים. יש מספר דרכים לעשות את זה, וההגדרה שנבחר בה תלויה באיזור אנימציה נבחר לממש למעבר בין טאבים. נתחיל מהבסיס – display none. בשלב הוספת האנימציות – נשחק גם עם ההגדרה הזו.

קוד הJS למעבר בין טאבים

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

והנה זה עובד….

כתוב/כתבי תגובה