Dynamické HTML (DHTML) vám umožňuje vytvořit na vašem webu zážitek ve stylu aplikace, což snižuje frekvenci plného načítání celých stránek. Když v aplikacích na něco kliknete, aplikace se okamžitě změní, aby zobrazila konkrétní obsah nebo vám poskytla odpověď.
Naproti tomu se webové stránky obvykle musí znovu načíst nebo se musí načíst zcela nová stránka. Díky tomu může být uživatelský zážitek více nesouvislý. Vaši zákazníci musí počkat, až se načte první stránka, a pak znovu počkat, až se načte druhá stránka, atd.
Slouží ke zlepšení zážitku diváka
Pomocí DHTML je jedním z nejjednodušších způsobů, jak tuto zkušenost vylepšit, mít div prvky se zapínají a vypínají, aby zobrazovaly obsah, když je požadován. A prvek div definuje logické dělení na vaší webové stránce. Představte si div jako rámeček, který může obsahovat odstavce, nadpisy, odkazy, obrázky a dokonce i další div.
Co budete potřebovat
Chcete-li vytvořit div, který lze zapínat a vypínat, potřebujete následující:
- Odkaz na ovládání div zapnutím a vypnutím po kliknutí.
- Div k zobrazení a skrytí.
- CSS styl div skrytý nebo viditelný.
- JavaScript k provedení akce.
Řídicí odkaz
Ovládací odkaz je nejjednodušší část. Jednoduše vytvořte odkaz jako na jinou stránku. Prozatím ponechte atribut href prázdný.
Naučte se HTML
Umístěte jej kamkoli na svou webovou stránku.
Div k zobrazení a skrytí
Vytvořte prvek div, který chcete zobrazit a skrýt. Ujistěte se, že váš div má jedinečné ID. V příkladu je jedinečné ID naučit se HTML.
Toto je sloupec obsahu. Začíná to prázdné, s výjimkou tohoto textu vysvětlení. V navigačním sloupci vlevo vyberte, co se chcete naučit. Text se objeví níže:
Naučte se HTML
- Zdarma třída HTML
- Výukový program HTML
- Co je XHTML?
CSS pro zobrazení a skrytí div
Vytvořte pro svůj CSS dvě třídy: jednu skryjte div a druhou ji zobrazte. Máte dvě možnosti: zobrazení a viditelnost.
Displej odebere div z toku stránky a viditelnost pouze změní jeho zobrazení. Někteří programátoři dávají přednost Zobrazit, ale někdy viditelnost dává také smysl. Například:
.hidden {display: none; }
.unhidden {display: block; }
Pokud chcete použít viditelnost, změňte tyto třídy na:
.hidden {viditelnost: skrytý; }
.unhidden {viditelnost: viditelný; }
Přidejte do svého divu skrytou třídu tak, aby na stránce začínala jako skrytá:
JavaScript, aby to fungovalo
Všechno, co tento skript dělá, je podívat se na aktuální třídu nastavenou na vaší div a přepnout ji na skrytou, pokud je označena jako skrytá nebo naopak.
Toto je jen několik řádků JavaScriptu. Umístěte do hlavy svého HTML dokument (před.
Co tento skript dělá, řádek po řádku:
Volá funkci odkrýt, a divID je přesné jedinečné ID, které chcete zobrazit nebo skrýt.
Nastaví proměnnou item s hodnotou vašeho div.
Provede jednoduchou kontrolu prohlížeče; pokud prohlížeč nepodporuje getElementById, tento skript nebude fungovat.
Zkontroluje třídu na div. Jestli je to skrytý, změní to na skrytý. Jinak to změní na skrytý.
Zavře -li prohlášení.
Zavře funkci.
Aby skript fungoval, musíte udělat ještě jednu věc. Vraťte se ke svému odkazu a přidejte javascript k atributu href. Ujistěte se, že používáte přesné jedinečné ID, které jste pojmenovali div v tomto href:
Naučte se HTML
Gratulujeme! Nyní máte div, který se zobrazí a skryje, kdykoli kliknete na odkaz.
Možné problémy, na které je třeba dávat pozor
Tento skript není bláznivý. Existují situace, kdy by vám to mohlo způsobit problémy:
JavaScript není zapnutý. Pokud vaši čtenáři nemají JavaScript nebo je vypnutý, tento skript nebude fungovat. Skryté divy zůstávají skryté bez ohledu na to, co dělají vaši čtenáři. Jedním ze způsobů, jak to opravit, je umístit skryté divy do oblasti noscriptů, ale budete si muset s tím pohrát, aby se správně zobrazily.
Příliš mnoho obsahu. Může to být skvělý nástroj, který vašim čtenářům umožní vidět pouze obsah, který potřebují, ale pokud do skrytých divů vložíte příliš mnoho, může to drasticky ovlivnit načítání stránky. Pamatujte, že i když se obsah nezobrazuje, webový prohlížeč jej stále stahuje, proto používejte rozumné množství obsahu, který skryjete.
Zákazníci nerozumí. Nakonec zákazníci nemusí být zvyklí klikat na odkaz, který zobrazuje nebo skrývá obsah. Hrajte si s ikonami (znaménka plus a šipky fungují dobře) nebo textem, který vysvětlí, co se stane vašim zákazníkům. Dalším řešením je nechat jeden z divů otevřený, zatímco ostatní jsou zavřeni. To může sdělit myšlenku vašim zákazníkům, aby mohli rychleji zjistit, jak otevřít zbývající obsah.
Takové dynamické HTML byste měli u svých zákazníků vždy otestovat. Jakmile budete mít jistotu, že mu rozumějí a budou jej používat, může to být skvělý způsob, jak na své webové stránky dostat velké množství obsahu, aniž byste zabrali hodně místa.