Postavljanje skrivenih blokova teksta poboljšava vizualnu percepciju stranice web stranice - ona se učitava u preglednik točno onako kako ga je dizajner dizajnirao, bez obzira na količinu objavljenih informacija. Osim toga, posjetitelju je prikladnije - u potrazi za potrebnim blokom informacija ne mora pregledavati cijeli niz, već samo male "vrhove santi leda".
Nužno je
Osnovno znanje HTML-a i JavaScript-a
Upute
Korak 1
Koristite prilagođenu JavaScript funkciju da biste sakrili i prikazali željene blokove teksta na HTML stranici. Zajednička funkcija za sve blokove mnogo je prikladnija od dodavanja koda svakom od njih zasebno. U zaglavni dio izvornog koda stranice stavite oznake skripte za otvaranje i zatvaranje, a između njih stvorite praznu funkciju s imenom, na primjer swap i jednim obaveznim ulaznim parametrom id: function swap (id) {}
Korak 2
U tijelo funkcije, između kovrčavih zagrada, dodajte dva retka JavaScript koda. U prvom retku treba pročitati trenutno stanje bloka teksta - je li njegova vidljivost uključena ili isključena. U dokumentu može biti nekoliko takvih blokova, pa svaki mora imati svoj identifikator - njegova funkcija prima id kao jedini ulazni parametar. Koristeći ovaj identifikator, traži potreban blok u dokumentu, dodjeljujući vrijednost vidljivosti / nevidljivosti (stanje svojstva prikaza) sDisplay varijabli: sDisplay = document.getElementById (id).style.display;
3. korak
Drugi redak trebao bi promijeniti svojstvo prikaza željenog bloka teksta u suprotno - sakriti ako je tekst vidljiv i pokazati je li skriven. To se može učiniti sa sljedećim kodom: document.getElementById (id).style.display = sDisplay == 'none'? '': 'nema';
4. korak
U odjeljak zaglavlja dodajte sljedeću tablicu stilova: {kursor: pokazivač} To će vam trebati za ispravan prikaz pokazivača miša kada zadržite pokazivač iznad nepotpune oznake veze. Pomoću takvih veza na stranici organizirate prebacivanje vidljivosti / nevidljivosti tekstualnih blokova.
Korak 5
Postavite ove preklopne veze u tekst prije svakog skrivenog bloka, a u blokove na kraju teksta dodajte sličnu vezu. Nevidljivi tekst priložite u oznake raspona kojima su nevidljivosti postavljene u atributima stila. Na primjer: Proširi tekst +++ Ovo je skriveni tekst --- U ovom primjeru klikom na vezu s tri plus pozvat će se gornja funkcija na događaju onClick, prosljeđujući joj ID bloka koji će biti vidljiv. A unutar bloka nalazi se poveznica od tri minusa s istim funkcijama - klik na nju sakrit će tekst.
Korak 6
Stvorite potreban broj tekstualnih blokova, sličan onome opisanom u prethodnom koraku, sjećajući se da promijenite ID-ove u atributu id oznake raspona i u varijabli koju je funkciji proslijedio događaj onClick u dvije veze.
