Peidetud tekstiplokkide paigutamine parandab veebisaidi lehe visuaalset tajumist - see laaditakse brauserisse täpselt nii, nagu disainer selle kujundas, olenemata postitatud teabe hulgast. Lisaks on see külastajal mugavam - vajaliku infobloki otsimisel ei pea ta vaatama läbi kogu massiivi, vaid ainult väikseid "jäämägede näpunäiteid".
See on vajalik
Põhiteadmised HTML-ist ja JavaScripti kohta
Juhised
Samm 1
HTML-lehel soovitud tekstiplokkide peitmiseks ja kuvamiseks kasutage kohandatud JavaScripti funktsiooni. Kõigi plokkide ühine funktsioon on palju mugavam kui koodi lisamine neile kõigile eraldi. Asetage lehe lähtekoodi päisesse algus- ja sulgemisskripti sildid ning looge nende vahele tühi funktsioon nimega, näiteks swap ja üks vajalik sisendparameetri id: function swap (id) {}
2. samm
Lisage funktsiooni kehasse lokkis trakside vahele kaks JavaScripti koodi rida. Esimene rida peaks lugema tekstiploki praegust olekut - olenemata sellest, kas selle nähtavus on sisse või välja lülitatud. Selliseid plokke võib dokumendis olla mitu, nii et igal neist peab olema oma identifikaator - just tema funktsioon saab ainsaks sisendparameetriks id. Selle identifikaatori abil otsib see dokumendis vajaliku ploki, määrates nähtavuse / nähtamatuse väärtuse (kuvaomaduse olek) muutujale sDisplay: sDisplay = document.getElementById (id).style.display;
3. samm
Teine rida peaks muutma soovitud tekstiploki kuvaomaduse vastupidiseks - peita, kui tekst on nähtav, ja näidata, kui see on peidetud. Seda saab teha järgmise koodiga: document.getElementById (id).style.display = sDisplay == 'pole'? ':' pole ';
4. samm
Lisage päisesse järgmine stiilileht: a {cursor: pointer} Seda vajate hiirekursori õigeks kuvamiseks, kui hõljutate kursorit mittetäieliku lingi märgendi kohal. Selliste linkide abil saate lehel korraldada tekstiplokkide nähtavuse / nähtamatuse vahetamise.
5. samm
Asetage need lülituslingid teksti enne iga peidetud plokki ja teksti lõpus olevatesse plokkidesse lisage sarnane link. Sulge nähtamatu tekst span-sildidesse, mille stiiliatribuutides on nähtamatus seatud. Näiteks: Laienda teksti +++ See on peidetud tekst --- Selles näites helistab kolme pluss lingile ülaltoodud funktsioon onClicki sündmusele, edastades sellele nähtavaks muudetava ploki ID. Ja ploki sees on link, kus on kolm samade funktsioonidega miinust - sellel klõpsates peidetakse tekst.
6. samm
Looge vajalik arv tekstiplokke, mis on sarnane eelmises etapis kirjeldatuga, pidades meeles, et muutke ID-sid span-sildi atribuudis id ja mõnes lingis onClick-sündmuse poolt funktsioonile edastatud muutujas.
