Umiestnenie skrytých blokov textu zlepšuje vizuálne vnímanie webovej stránky - načíta sa do prehľadávača presne tak, ako to dizajnér navrhol, bez ohľadu na množstvo zverejnených informácií. Pre návštevníka je to navyše pohodlnejšie - pri hľadaní potrebného bloku informácií nemusí prezerať celé pole, ale iba malé „končeky ľadovcov“.
Je to nevyhnutné
Základné znalosti HTML a JavaScript
Inštrukcie
Krok 1
Na skrytie a zobrazenie požadovaných blokov textu na stránke HTML použite vlastnú funkciu JavaScriptu. Spoločná funkcia pre všetky bloky je oveľa pohodlnejšia ako pridávanie kódu do každého z nich zvlášť. V záhlaví zdrojového kódu stránky umiestnite otváraciu a záverečnú značku skriptu a medzi nimi vytvorte prázdnu funkciu s názvom, napríklad swap a jeden požadovaný vstupný parameter id: function swap (id) {}
Krok 2
Pridajte dva riadky kódu JavaScript do tela funkcie medzi zložené zátvorky. Prvý riadok by mal čítať aktuálny stav bloku textu - či je jeho viditeľnosť zapnutá alebo vypnutá. V dokumente môže byť niekoľko takýchto blokov, takže každý musí mať vlastný identifikátor - je to jeho funkcia, ktorá ako jediný vstupný parameter dostane id. Pomocou tohto identifikátora vyhľadá potrebný blok v dokumente a priradí hodnotu viditeľnosti / neviditeľnosti (stav vlastnosti display) k premennej sDisplay: sDisplay = document.getElementById (id).style.display;
Krok 3
Druhý riadok by mal zmeniť vlastnosť zobrazenia požadovaného bloku textu na opačnú - skryť, ak je text viditeľný, a zobraziť, či je skrytý. To je možné vykonať pomocou nasledujúceho kódu: document.getElementById (id).style.display = sDisplay == 'none'? '': 'žiadny';
Krok 4
Do sekcie hlavičky pridajte nasledujúci šablónu štýlov: a {cursor: pointer} Toto budete potrebovať, aby ste správne ukazovali myš, keď podržíte kurzor myši na neúplnej značke odkazu. Pomocou takýchto odkazov usporiadate na stránke prepínanie viditeľnosti / neviditeľnosti textových blokov.
Krok 5
Tieto prepínacie odkazy umiestnite do textu pred každý skrytý blok a do blokov na koniec textu pridajte podobný odkaz. Vložte neviditeľný text do značiek rozpätia, ktoré majú v atribútoch štýlu nastavenú neviditeľnosť. Napríklad: Rozbaliť text +++ Toto je skrytý text --- V tomto príklade kliknutím na odkaz tri plus zavoláte vyššie uvedenú funkciu v udalosti onClick a odovzdáte jej ID bloku, ktorý sa má zviditeľniť. A vo vnútri bloku je odkaz troch mínusov s rovnakými funkciami - kliknutím na neho sa text skryje.
Krok 6
Vytvorte požadovaný počet textových blokov, podobný tomu, ktorý bol popísaný v predchádzajúcom kroku, a nezabudnite zmeniť ID v atribúte id tagu span a v premennej odovzdanej funkcii udalosťou onClick v dvoch odkazoch.
