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, on ne mora pregledavati čitav niz, već samo male "vrhove santi leda".
Neophodno je
Osnovno znanje HTML-a i JavaScript-a
Instrukcije
Korak 1
Koristite prilagođenu JavaScript funkciju da sakrijete i prikažete željene blokove teksta na HTML stranici. Zajednička funkcija za sve blokove je mnogo 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
Dodajte dva reda JavaScript koda u tijelo funkcije, između kovrčavih zagrada. U prvom retku treba pročitati trenutno stanje bloka teksta - bez obzira 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) varijabli sDisplay: sDisplay = document.getElementById (id).style.display;
Korak 3
Drugi red bi trebao 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';
Korak 4
Dodajte sljedeću tablicu stilova u odjeljak zaglavlja: {kursor: pokazivač} To će vam trebati za pravilno prikazivanje pokazivača miša kada zadržite pokazivač iznad nepotpune oznake veze. Uz pomoć takvih veza na stranici organizirate prebacivanje vidljivosti / nevidljivosti blokova teksta.
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 veza od tri minusa s istim funkcijama - klik na njega sakrić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.
