Gizli mətn bloklarının yerləşdirilməsi bir veb səhifənin vizual qavrayışını yaxşılaşdırır - yerləşdirilən məlumat miqdarından asılı olmayaraq dizayner tərəfindən tərtib edildiyi kimi brauzerə yüklənir. Bundan əlavə, ziyarətçi üçün daha rahatdır - lazımi məlumat blokunu axtarmaq üçün bütün massivi yoxlamaq məcburiyyətində qalır, yalnız kiçik "aysberqlərin ucları".
Vacibdir
HTML və JavaScript haqqında əsas biliklər
Təlimat
Addım 1
HTML səhifəsində istədiyiniz mətn bloklarını gizlətmək və göstərmək üçün xüsusi bir JavaScript funksiyasından istifadə edin. Bütün bloklar üçün ümumi bir funksiya, hər birinə ayrıca kod əlavə etməkdən daha rahatdır. Səhifənin mənbə kodunun başlıq hissəsində açılış və bağlanış skript etiketlərini yerləşdirin və aralarında bir ad ilə boş bir funksiya yaradın, məsələn, dəyişdirin və bir tələb olunan giriş parametri id: function swap (id) {}
Addım 2
Buruq mötərizələr arasında funksiyanın gövdəsinə iki sətir JavaScript kodu əlavə edin. Birinci sətir mətn blokunun mövcud vəziyyətini oxumalıdır - görünürlüğünün açıq və ya sönülü olmasına baxmayaraq. Sənəddə bu cür bloklar bir neçə ola bilər, buna görə hər birinin öz identifikatoru olmalıdır - tək giriş parametri kimi id alan onun funksiyasıdır. Bu identifikatordan istifadə edərək sDisplay dəyişəninə görünürlük / görünməzlik dəyərini (ekran xüsusiyyətinin vəziyyəti) təyin edərək sənəddəki zəruri bloku axtarır: sDisplay = document.getElementById (id).style.display;
Addım 3
İkinci sətir istədiyiniz mətn blokunun göstərmə xüsusiyyətini əksinə dəyişdirməlidir - mətn görünsə gizlə, gizlədilsə göstər. Bunu aşağıdakı kodla etmək olar: document.getElementById (id).style.display = sDisplay == 'none'? '': 'yox';
Addım 4
Başlıq hissəsinə aşağıdakı üslub cədvəlini əlavə edin: a {cursor: pointer} Yarımçıq bir əlaqə etiketinin üzərinə sürüşdürdüyünüz zaman siçan göstəricisini düzgün göstərmək üçün buna ehtiyacınız olacaq. Bu cür əlaqələrin köməyi ilə səhifədəki mətn bloklarının görünürlüğünü / görünməməsini dəyişdirin.
Addım 5
Bu keçid keçidlərini hər gizli blokdan əvvəl mətnə qoyun və mətnin sonundakı bloklara oxşar bir link əlavə edin. Görünməz mətni üslub xüsusiyyətlərində müəyyən görünməzlik olan span etiketlərinə daxil edin. Məsələn: Mətni genişləndir +++ Bu gizli mətndir --- Bu misalda üç üstəgəl bir linki vurmaq yuxarıdakı funksiyanı onClick hadisəsində axtaracaq və görünəcək blokun kimliyini ötürəcəkdir. Blokun içərisində eyni funksiyaları olan üç mənfi bir əlaqə var - üzərinə vurmaq mətni gizlədəcəkdir.
Addım 6
Əvvəlki addımda təsvir edilənə bənzər bir sıra mətn blokları yaradın, span etiketinin id atributundakı və iki əlaqədəki onClick hadisəsi ilə funksiyaya ötürülən dəyişəndəki şəxsiyyətləri dəyişdirməyi unutmayın.
