Zobraziť a skryť text alebo obrázky pomocou CSS a JavaScript

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:

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 HTML

Umiestnite 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:

Learn HTML
  • Voľná ​​HTML Trieda
  • HTML Tutorial a>
  • Čo je XHTML?

    CSS pre zobrazenie a skrytie Div

    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:

    .hdd {display: none; }. nevidený {display: block; }

    Ak chcete použiť viditeľnosť, zmeňte tieto triedy na:

    .hidden {viditeľnosť: skryté; }. neviditeľná {viditeľnosť: viditeľná; }

    Pridajte skrytú triedu do svojho diva, aby sa začala ako skrytá na stránke:

    class = "hidden" >

    JavaScript, aby to fungovalo

    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 :