הצגה והסתרה של טקסט או תמונות באמצעות CSS ו- JavaScript

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

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

משתמשים בשיפור חוויית הצופה

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

מה אתה צריך

על מנת ליצור מחלק שניתן להפעיל ולכבות, אתה צריך את הדברים הבאים:

• קישור לשליטה בחלוקה על ידי הפעלה וכיבוי של הלחיצה.
• החטיבה להראות ולהסתיר.
• CSS לעצב את הדיב מוסתר או גלוי.
• JavaScript לביצוע הפעולה.

הקישור השולט

הקישור השולט הוא החלק הקל ביותר. כל שעליך לעשות הוא ליצור קישור כמו שהיית עושה לדף אחר. לעת עתה, עזוב את תכונת href רֵיק.

למד HTML

מקם זאת בכל מקום בדף האינטרנט שלך.

Div להראות ולהסתיר

צור את אלמנט ה- div שברצונך להציג ולהסתיר. וודא כי ל- div שלך יש מזהה ייחודי. בדוגמה, המזהה הייחודי הוא ללמוד HTML.

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

למד HTML

• כיתת HTML בחינם
• הדרכת HTML
• מהו XHTML?

ה- CSS להראות ולהסתיר את ה- Div

צור שני שיעורים עבור ה- CSS שלך: אחד כדי להסתיר את ה- div והשני כדי להראות אותו. יש לך שתי אפשרויות לכך: תצוגה ונראות.

התצוגה מסירה את החלוקה מזרימת העמודים, והנראות רק משנה את האופן שבו היא נראית. יש קודנים שמעדיפים לְהַצִיג, אבל לִפְעָמִים רְאוּת הגיוני גם כן. לדוגמה:

.מוסתר {תצוגה: אין; }
.סתר {תצוגה: חסום; } 

אם ברצונך להשתמש בנראות, שנה שיעורים אלה ל:

.מוסתר {נראות: נסתר; }
.סתר {נראות: גלוי; } 

הוסף את המחלקה הנסתרת למחלק שלך כך שהוא יתחיל להיות מוסתר בדף:

JavaScript כדי לגרום לזה לעבוד

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

זה רק כמה שורות של JavaScript. הצב את הדברים הבאים בראש שלך מסמך HTML (לפני ה.

מה התסריט הזה עושה, שורה אחר שורה:

1. מתקשר לפונקציה לבטל הסתרה, ו divID הוא המזהה הייחודי המדויק שברצונך להציג או להסתיר.

2. מגדיר משתנה item עם ערך הדיביד שלך.

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

4. בודק את הכיתה בחטיבה. אם זה מוּסתָר, זה משנה את זה ל לא מוסתר. אחרת, זה משנה את זה ל מוּסתָר.

5. סוגר את אם הַצהָרָה.

6. סוגר את הפונקציה.

כדי לגרום לתסריט לעבוד, עליכם לעשות דבר נוסף. חזור לקישור שלך והוסף את javascript למאפיין href. הקפד להשתמש במזהה הייחודי המדויק שקיבלת את ה- div שלך ב- href זה:

למד HTML 

מזל טוב! כעת יש לך מחלקה שתוצג ותסתיר בכל פעם שתלחץ על קישור.

בעיות אפשריות להיזהר

התסריט הזה אינו חסין טיפשות. יש כמה מצבים שבהם זה יכול לגרום לך לבעיות:

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

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

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

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