Vytvorte na svojich webových stránkach skúsenosti s aplikáciou
Dynamické HTML (DHTML) vám umožňuje vytvoriť na vašich webových stránkach skúsenosti v štýle aplikácie, čím sa znižuje frekvencia celých stránok, ktoré je potrebné plne načítať. V aplikáciách, keď kliknete na niečo, aplikácia sa okamžite zmení, aby zobrazila daný obsah alebo aby vám poskytla vašu odpoveď.
Na rozdiel od toho musia byť webové stránky zvyčajne opätovne načítané alebo je potrebné načítať celú novú stránku. To môže mať za následok väčší rozdiel medzi užívateľskými skúsenosťami. Vaši zákazníci musia čakať na načítavanie prvej stránky, a potom opäť čakať na načítanie druhej stránky atď.
Pomocou & lt; div & gt; na zlepšenie skúseností s prehliadkou
Použitím DHTML, jedným z najjednoduchších spôsobov, ako zlepšiť túto skúsenosť, je, aby div prvky zapínali a vypínali, aby zobrazovali obsah, keď je požadovaný. Prvek div definuje logické rozdiely na vašej webovej stránke. Premýšľajte o div ako o krabici, ktorá môže obsahovať odseky, nadpisy, odkazy, obrázky a dokonca aj ďalšie.
Čo budete potrebovať
Ak chcete vytvoriť div, ktorý možno prepínať a vypínať, potrebujete nasledujúce:
- Odkaz na ovládanie Div zapnutím a vypnutím pri kliknutí
- Div sa ukázať a skrývať
- CSS štýlu div skryté alebo viditeľné
- JavaScript na vykonanie akcie
Ovládacie prepojenie
Riadiaci odkaz je najjednoduchšia. Jednoducho vytvorte odkaz, ako by ste sa na inú stránku. Zatiaľ nechajte atribút href prázdny.
Naučte sa HTMLUmiestnite to kdekoľvek na vašej webovej stránke.
Div pre zobrazenie a skrytie
Vytvorte element div, ktorý chcete zobraziť a skryť. Uistite sa, že váš div má jedinečné ID. V príklade je jedinečným identifikátorom naučiť HTML .
Toto je stĺpec s obsahom. Začína prázdne okrem tohto vysvetľujúceho textu. Zvoľte si to, čo sa chcete naučiť v navigačnom stĺpci vľavo. Text sa zobrazí nižšie: p> Vytvorte dve triedy pre svoju CSS: jednu, aby ste skryli div a druhú zobrazili. Máte dve možnosti: zobrazenie a viditeľnosť. Displej odstraňuje div z toku stránky a viditeľnosť iba mení spôsob jeho zobrazenia. Niektorí programátori dávajú prednosť zobrazeniu , ale niekedy aj viditeľnosť má zmysel. Napríklad: Ak chcete použiť viditeľnosť, zmeňte tieto triedy na: Pridajte skrytú triedu do svojho diva, aby sa začala ako skrytá na stránke: Všetok tento skript robí je pozrieť sa na aktuálnu triedu nastavenú na vašom div a prepínať ju, aby sa nezobrazila, ak je označená ako skrytá alebo naopak. Toto je len niekoľko riadkov jazyka JavaScript. Do hlavičky dokumentu HTML umiestnite nasledujúce položky (pred značkou Learn HTML h3>
CSS pre zobrazenie a skrytie Div
JavaScript, aby to fungovalo