Namestitev skritih blokov besedila izboljša vizualno zaznavanje strani spletnega mesta - v brskalnik se naloži točno tako, kot ga je oblikoval oblikovalec, ne glede na količino objavljenih informacij. Poleg tega je za obiskovalca bolj priročno - v iskanju potrebnega bloka informacij mu ni treba pogledati celotnega polja, temveč le majhne "konice ledenih gora".
Potrebno je
Osnovno znanje HTML in JavaScript
Navodila
Korak 1
Uporabite funkcijo JavaScript po meri, da skrijete in prikažete želene bloke besedila na strani HTML. Skupna funkcija za vse bloke je veliko bolj priročna kot dodajanje kode vsakemu posebej. V zgornji del izvorne kode strani postavite odpiralni in zapiralni skriptni oznaki in med njimi ustvarite prazno funkcijo z imenom, na primer swap in enim zahtevanim vhodnim parametrom id: swap (id) {}
2. korak
V telo funkcije med skodranimi oklepaji dodajte dve vrstici kode JavaScript. V prvi vrstici naj se prebere trenutno stanje bloka besedila - ali je njegova vidnost vklopljena ali izklopljena. V dokumentu je lahko več takih blokov, zato mora imeti vsak svoj identifikator - njegova funkcija prejme id kot edini vhodni parameter. S pomočjo tega identifikatorja poišče potreben blok v dokumentu, tako da spremenljivki sDisplay dodeli vrednost vidnost / nevidnost (stanje lastnosti zaslona): sDisplay = document.getElementById (id).style.display;
3. korak
Druga vrstica naj spremeni lastnost prikaza želenega bloka besedila v nasprotno - skrij, če je besedilo vidno, in pokaži, če je skrito. To lahko storite z naslednjo kodo: document.getElementById (id).style.display = sDisplay == 'none'? '': 'nič';
4. korak
V razdelek z glavo dodajte naslednji slog: a {cursor: pointer} To boste potrebovali za pravilen prikaz kazalca miške, ko se pomaknete nad nepopolno oznako povezave. S pomočjo takih povezav na strani organizirate preklapljanje med vidnostjo / nevidnostjo besedilnih blokov.
5. korak
Te preklopne povezave postavite v besedilo pred vsakim skritim blokom, v bloke na koncu besedila pa dodajte podobno povezavo. Nevidno besedilo zaprite v oznake razpona, ki imajo v svojih atributih sloga nastavljeno nevidnost. Na primer: Razširi besedilo +++ To je skrito besedilo --- V tem primeru bo klik na povezavo tri plus poklical zgornjo funkcijo na dogodku onClick in ji poslal ID bloka, ki bo viden. In znotraj bloka je povezava treh minusov z enakimi funkcijami - s klikom nanjo bo besedilo skrito.
6. korak
Ustvarite zahtevano število besedilnih blokov, podobno tistemu, opisanemu v prejšnjem koraku, pri čemer ne pozabite spremeniti ID-jev v atributu id oznake span in v spremenljivki, ki jo funkciji posreduje dogodek onClick v dveh povezavah.
