Dynamické HTML (DHTML) vám umožňuje vytvoriť na vašom webovom serveri prostredie v štýle aplikácie, čím sa zníži frekvencia úplného načítania celých stránok. Keď v aplikáciách kliknete na niečo, aplikácia sa okamžite zmení, aby zobrazila konkrétny obsah alebo vám poskytla odpoveď.
Naopak, webové stránky sa zvyčajne musia načítať znova alebo sa musí načítať úplne nová stránka. Vďaka tomu môže byť používateľská skúsenosť viac nesúrodá. Vaši zákazníci musia čakať na načítanie prvej stránky a potom opäť čakať na načítanie druhej stránky atď.
Používa sa na zlepšenie zážitku diváka
Jedným z najjednoduchších spôsobov, ako vylepšiť túto skúsenosť, je použitie DHTML div prvky sa zapínajú a vypínajú, aby sa obsah zobrazil, keď je požadovaný. A prvok div definuje logické rozdelenie na vašej webovej stránke. Predstavte si div ako box, ktorý môže obsahovať odseky, nadpisy, odkazy, obrázky a dokonca aj ďalšie divy.
Čo budete potrebovať
Na vytvorenie divu, ktorý je možné zapnúť a vypnúť, je potrebné nasledujúce:
- Odkaz na ovládanie divu jeho zapnutím a vypnutím po kliknutí.
- Div, ktorý chcete zobraziť a skryť.
- CSS štýl div skrytý alebo viditeľný.
- JavaScript na vykonanie akcie.
Kontrolný odkaz
Ovládací odkaz je najjednoduchšia časť. Jednoducho vytvorte odkaz, ako by ste vytvorili na inú stránku. Zatiaľ nechajte atribút href prázdny.
Naučte sa HTML
Toto umiestnite kdekoľvek na svoju webovú stránku.
Div na zobrazenie a skrytie
Vytvorte prvok div, ktorý chcete zobraziť a skryť. Uistite sa, že váš div má jedinečné ID. V príklade je jedinečné ID naučiť sa HTML.
Toto je stĺpec obsahu. Začína sa prázdne, až na tento text s vysvetlením. V navigačnom stĺpci vľavo vyberte, čo sa chcete naučiť. Text sa zobrazí nižšie:
Naučte sa HTML
- Trieda HTML zadarmo
- Výukový program HTML
- Čo je to XHTML?
CSS na zobrazenie a skrytie div
Vytvorte pre svoj CSS dve triedy: jednu na skrytie divu a druhú na jej zobrazenie. Máte dve možnosti: zobrazenie a viditeľnosť.
Displej odstráni prvok div z toku stránok a viditeľnosť iba zmení jeho videnie. Niektorí programátori uprednostňujú displej, ale niekedy viditeľnosť má tiež zmysel. Napríklad:
.skrytý {display: none; }
.unhidden {display: block; }
Ak chcete použiť viditeľnosť, zmeňte tieto triedy na:
. skrytý {viditeľnosť: skrytý; }
.unhidden {viditeľnosť: viditeľné; }
Pridajte do svojho divu skrytú triedu tak, aby sa na stránke začínala skrytá:
JavaScript, aby to fungovalo
Všetko, čo tento skript robí, je pozrieť sa na aktuálnu triedu nastavenú na vašom div a prepnúť ju na skrytú, ak je označená ako skrytá alebo naopak.
Toto je iba niekoľko riadkov kódu JavaScript. Nasledujúce položte do hlavy svojho HTML dokument (pred.
Čo tento skript robí, riadok po riadku:
Zavolá funkciu odkryťa divID je presné jedinečné ID, ktoré chcete zobraziť alebo skryť.
Nastaví premennú item s hodnotou tvojho div.
Vykoná jednoduchú kontrolu prehliadača; ak prehliadač nepodporuje getElementById, tento skript nebude fungovať.
Skontroluje triedu na div. Ak je to skryté, zmení sa na skrytý. V opačnom prípade sa zmení na skryté.
Zatvára ak vyhlásenie.
Zatvára funkciu.
Aby skript fungoval, musíte urobiť ešte jednu vec. Vráťte sa na svoj odkaz a pridajte javascript k atribútu href. Nezabudnite použiť presné jedinečné ID, ktoré ste pomenovali div v tomto href:
Naučte sa HTML
Blahoželáme! Teraz máte div, ktorý sa zobrazí a skryje vždy, keď kliknete na odkaz.
Možné problémy, na ktoré si treba dať pozor
Tento skript nie je bláznivý. Existujú situácie, v ktorých by vám to mohlo spôsobiť problémy:
JavaScript nie je zapnutý. Ak vaši čitatelia nemajú JavaScript alebo je vypnutý, tento skript nebude fungovať. Skryté prvky zostávajú skryté bez ohľadu na to, čo robia vaši čitatelia. Jedným zo spôsobov, ako to vyriešiť, je vložiť skryté prvky div do oblasti noscriptov, ale musíte sa s tým pohrať, aby sa správne zobrazili.
Príliš veľa obsahu. Môže to byť skvelý nástroj, ktorý umožní vašim čitateľom vidieť iba potrebný obsah, ale ak vložíte príliš veľa do skrytých prvkov, môže to drasticky ovplyvniť načítanie stránky. Pamätajte, že aj keď sa obsah nezobrazuje, webový prehľadávač ho stále sťahuje, takže rozumne sledujte, koľko obsahu skryjete.
Zákazníci tomu nerozumejú. Nakoniec zákazníci nemusia byť zvyknutí kliknúť na odkaz, ktorý zobrazuje alebo skrýva obsah. Pohrajte sa s ikonami (dobre fungujú aj znamienka a šípky) alebo textom, ktorý vysvetľuje, čo sa stane s vašimi zákazníkmi. Ďalším riešením je nechať jednu z častí div otvorenú, zatiaľ čo ostatné sú zatvorené. Toto môže preniesť nápad na vašich zákazníkov, aby mohli rýchlejšie zistiť, ako otvoriť zostávajúci obsah.
Takéto dynamické HTML by ste mali u svojich zákazníkov vždy otestovať. Akonáhle si budete istí, že ho pochopia a použijú, môže to byť skvelý spôsob, ako získať veľké množstvo obsahu na svoje webové stránky bez toho, aby zaberali veľa viditeľného miesta.