הצבת גושי טקסט מוסתרים משפרת את התפיסה החזותית של דף אתר - הוא נטען בדפדפן בדיוק כפי שתכנן אותו המעצב, ללא קשר לכמות המידע שפורסם. בנוסף, זה נוח יותר למבקר - בחיפוש אחר גוש המידע הדרוש, הוא לא צריך לחפש את כל המערך, אלא רק "טיפים של קרחונים" קטנים.
זה הכרחי
ידע בסיסי ב- HTML ו- JavaScript
הוראות
שלב 1
השתמש בפונקציה JavaScript מותאמת אישית כדי להסתיר ולהציג את גושי הטקסט הרצויים בדף HTML. פונקציה נפוצה עבור כל הבלוקים היא הרבה יותר נוחה מאשר הוספת קוד לכל אחד מהם בנפרד. בחלק הכותרת של קוד המקור של הדף, הצב את תגיות הסקריפט הפותח והסוגר, וביניהן צור פונקציה ריקה עם שם, למשל, החלפה ומזהה פרמטר קלט נדרש אחד: פונקציית החלפה (מזהה) {}
שלב 2
הוסף שתי שורות של קוד JavaScript לגוף הפונקציה, בין הפלטה המתולתלת. בשורה הראשונה צריך לקרוא את המצב הנוכחי של גוש הטקסט - בין אם הנראות שלו מופעלת או כבויה. במסמך יכולים להיות כמה חסימות כאלה, כך שלכל אחד מהם צריך להיות מזהה משלו - הפונקציה שלו היא זו שמקבלת את id כפרמטר הקלט היחיד. באמצעות מזהה זה, הוא מחפש את החסימה הדרושה במסמך, ומקצה את ערך הראות / הנראות (מצב מאפיין התצוגה) למשתנה sDisplay: sDisplay = document.getElementById (id).style.display;
שלב 3
על השורה השנייה לשנות את מאפיין התצוגה של גוש הטקסט הרצוי להיפך - להסתיר אם הטקסט גלוי ולהראות אם הוא מוסתר. ניתן לעשות זאת באמצעות הקוד הבא: document.getElementById (id).style.display = sDisplay == 'none'? '': 'אף אחד';
שלב 4
הוסף את גיליון הסגנונות הבא לקטע הכותרת: {cursor: pointer} תזדקק לכך כדי להציג את מצביע העכבר כהלכה כאשר אתה מעביר את העכבר מעל תג קישור לא שלם. בעזרת קישורים כאלה, אתה מארגן בדף את נראות / נראות של גושי טקסט.
שלב 5
הצב קישורים אלה בטקסט לפני כל בלוק מוסתר, ובבלוקים בסוף הטקסט הוסף קישור דומה. כלול טקסט בלתי נראה בתגיות טווח שמגדירות את הנראות בתכונות הסגנון שלהן. לדוגמא: הרחב טקסט +++ זה טקסט מוסתר --- בדוגמה זו, לחיצה על קישור שלוש פלוס תקרא לפונקציה שלמעלה באירוע onClick ותעביר לו את תעודת הזהות של החסימה שתהיה גלויה. ובתוך הבלוק יש קישור של שלושה מינוסים עם אותן פונקציות - לחיצה עליו תסתיר את הטקסט.
שלב 6
צור את המספר הנדרש של חסימות טקסט, בדומה לזה שתואר בשלב הקודם, וזכור לשנות את המזהים בתכונה id של תג התוחלת ובמשתנה שהועבר לפונקציה על ידי האירוע onClick בשני הקישורים.
