מדריך זה יסביר כיצד ליצור כרטיסיות עם CSS ו-JavaScript.
כיצד ליצור כרטיסיות עם CSS ו-JavaScript?
סעיף זה מבצע הוראות שלב אחר שלב ליצירת כרטיסיות עם CSS ו-JavaScript.
שלב 1: צור מבנה כרטיסיות באמצעות HTML
ראשית, עיין בקוד ה-HTML שיוצר את מבנה הכרטיסיות של HTML:
< מזהה div = 'טאב1' בלחיצה = 'ראשון()' > בית div >
< מזהה div = 'tab2' בלחיצה = 'שְׁנִיָה();' > על אודות div >
< div id = 'tab3' בלחיצה = 'שְׁלִישִׁי();' > צור קשר div >
< br />
< div id = 'המשך1' > ברוכים הבאים ל-Linuxhint ! div >
< div id = 'המשך 2' > חינוך טכנולוגי
בנינו מוצרים רבים כדי לעזור לך ללמוד על לינוקס, תכנות, מדעי המחשב ועוד.
div >
< div id = 'המשך 3' >
אתה יכול ליצור קשר עם הצוות שלנו בעורך AT linuxhint DOT com.
div >
בשורות הקוד לעיל:
- ה ' ' תג מוסיף רכיב div עם מזהה 'tab1' ו-' מצורף בלחיצה ' אירוע כדי לבצע את המקושר ' ראשון() ' פונקציה כאשר לוחצים עליה. אלמנט זה פועל כלשונית HTML.
- השיטה לעיל מבוצעת עבור שני רכיבי ה-div הבאים.
- ה '
' תג מוסיף מעבר שורה.- ה '
' תג שוב מוסיף רכיב div עם מזהה מוקצה 'cont1'. אלמנט זה מציג את התוכן של הכרטיסייה שנוצרה בבלוק.- השניים הבאים'
' תגיות גם מוסיפות רכיבי div עם המזהים שהוקצו להם.
שלב 2: סגנון כרטיסיות באמצעות CSSכעת, החל את מאפייני הסגנון של CSS כדי להתאים אישית את הכרטיסיות ותכולתן בהתאם לבחירתך:
< סִגְנוֹן >
#tab1, #tab2, #tab3 {
לָצוּף : שמאלה ;
ריפוד : 5px 10px 5px 10px ;
רקע כללי : כתום אדום ;
צֶבַע : #FFFFFF ;
שולים : 0px 5px 0px 5px ;
סַמָן : מַצבִּיעַ ;
גבול - רַדִיוּס : 3 פיקסלים ;
}
#tab1 : רחף, #tab2 : רחף, #tab3 : לְרַחֵף {
רקע כללי : ירוק ;
}
#cont1, #cont2, #cont3 {
רוֹחַב : 300 פיקסלים ;
גוֹבַה : 100 פיקסלים ;
ריפוד : 40 פיקסלים ;
גוֹפָן - גודל : בינוני ;
גוֹפָן - מִשׁפָּחָה : 'Times New Roman' , טיימס, סריף ;
גבול : 2 פיקסלים בצבע כתום מלא ;
גבול - רַדִיוּס : 7 פיקסלים ;
לְהַצִיג : אף אחד ;
}
סִגְנוֹן >בקטע הקוד האמור:
- ראשית, גש ל' כרטיסיות ' באמצעות המזהים שהוקצו להם והתאם אישית אותם באמצעות מאפייני הסגנון הבאים (ציפה, ריפוד, רקע, צבע, שוליים: 0px 5px 0px 5px, סמן ורדיוס גבול).
- לאחר מכן, צרף את ' לְרַחֵף ” מטפל באירועים עם הכרטיסיות כדי לשנות את צבעי הרקע שלהם כאשר עכבר המשתמש מרחף מעליהם.
- לאחר מכן, גש ל' תוכן הכרטיסיות ' מאוחסנים ברכיבי div שה-ID שלהם הם 'cont1', 'cont2' ו-'cont3'. כעת, החל את מאפייני הסגנון הבאים (רוחב, גובה, ריפוד, גודל גופן, משפחת גופנים, גבול, רדיוס גבול ותצוגה) עליהם.
שלב 3: הוסף פונקציות לכרטיסיות באמצעות JavaScriptלבסוף, הוסף פונקציונליות לכרטיסיות שנוצרו בעזרת JavaScript:
< תַסרִיט >
לתפקד קודם ( ) {
מסמך. getElementById ( 'המשך1' ) . סִגְנוֹן . לְהַצִיג = 'לַחסוֹם' ;
מסמך. getElementById ( 'המשך 2' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד' ;
מסמך. getElementById ( 'המשך 3' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד' ;
}
תפקיד שני ( ) {
מסמך. getElementById ( 'המשך 2' ) . סִגְנוֹן . לְהַצִיג = 'לַחסוֹם' ;
מסמך. getElementById ( 'המשך1' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד' ;
מסמך. getElementById ( 'המשך 3' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד' ;
}
תפקיד שלישי ( ) {
מסמך. getElementById ( 'המשך 3' ) . סִגְנוֹן . לְהַצִיג = 'לַחסוֹם' ;
מסמך. getElementById ( 'המשך1' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד' ;
מסמך. getElementById ( 'המשך 2' ) . סִגְנוֹן . לְהַצִיג = 'אף אחד'
}
תַסרִיט >שורות הקוד שלמעלה:
- הגדר פונקציה בשם ' ראשון '.
- בהגדרת פונקציה זו, ' document.getElementById() שיטת ' ניגשת לרכיב div שהמזהה שלו הוא 'cont1' ומחילה את ' סִגְנוֹן 'נכס עם ' לַחסוֹם 'ערך על זה. מאפיין זה יציג את תוכן הכרטיסייה עליה המשתמש לוחץ.
- לאחר מכן, ה-'document.getElementById()' ניגש ל-div אחר ומחיל את המאפיין 'style' בעל ערך 'none' כדי להסתיר אותו. זה יסתיר את הרכיב הזה בדף האינטרנט.
- השיטה לעיל מבוצעת עבור רכיבי ה-div הבא שניגשים אליהם. הסיבה לכך היא שהפונקציה 'הראשונה' מציגה רק את תוכן הכרטיסייה שערך המאפיין 'סגנון' שלה הוא 'חסימה' ומסתירה את האחרים.
- ההליך שלמעלה מבוצע עבור הפונקציות הבאות 'second()' ו-'third()'.
תְפוּקָה
ניתן לראות שהכרטיסיות נוצרות בהצלחה ומציגות את התוכן שלהן בלחיצת משתמש.
סיכום
כדי ליצור כרטיסיות תחילה בנה את המבנים שלהן באמצעות 'HTML', ולאחר מכן התאם אותן אישית בעזרת מאפייני סגנון CSS. מאפייני הסגנון מתווספים מבלי לייצא גיליון סגנונות נוסף. מאפיינים אלה הופכים את הכרטיסיות לאטרקטיביות ומושכות את העין. לאחר יצירת הכרטיסיות ומותאמות אישית, השתמש בשפת התכנות של JavaScript כדי להוסיף להן פונקציונליות. מדריך זה הסביר באופן מעשי את ההליך המלא ליצירת כרטיסיות עם CSS ו-JavaScript.