Zobrazit a skrýt text nebo obrázky pomocí CSS a JavaScript

Vytvoření zážitku ve stylu aplikace na vašich webových stránkách

Dynamický HTML (DHTML) umožňuje vytvářet na vašich webových stránkách zážitky ve stylu aplikace, což snižuje frekvenci, že celé stránky musí být plně načteny. V aplikacích, když klepnete na něco, aplikace se okamžitě změní tak, aby zobrazovala konkrétní obsah nebo vám poskytla odpověď.

Naproti tomu webové stránky obvykle musí být znovu načteny nebo je třeba načíst celou novou stránku. To může uživatelské zkušenosti více oddělit. Vaši zákazníci musí čekat, až se načte první stránka, a poté znovu počkejte, až se načte druhá stránka a podobně.

Použitím & lt; div & gt; ke zlepšení zkušeností diváků

Použitím protokolu DHTML je jedním z nejjednodušších způsobů, jak tuto zkušenost zlepšit, zapnutí a vypnutí elementů div pro zobrazení obsahu, pokud je požadováno. Prvek div definuje logické rozdělení na vaší webové stránce. Přemýšlejte o div jako o krabici, která může obsahovat odstavce, nadpisy, odkazy, obrázky a dokonce i další.

Co budete potřebovat

Chcete-li vytvořit div, který lze zapnout a vypnout, potřebujete následující:

Controlling Link

Řídící linka je nejjednodušší částí. Jednoduše vytvořte odkaz, jako byste byli na jiné stránce. Zatím nechte atribut href prázdný.

Naučte HTML

Umístěte to kdekoli na své webové stránce.

Div se ukáže a skrývá

Vytvořte element div, který chcete zobrazit a skrýt. Ujistěte se, že vaše div má jedinečné ID. V příkladu je jedinečným identifikátorem naučit se HTML .

Toto je sloupec obsahu. Začneme prázdné, s výjimkou tohoto vysvětlujícího textu. Zvolte si, co se chcete dozvědět v navigačním sloupci vlevo. Text se zobrazí níže:

Learn HTML
  • Bezplatná HTML Třída
  • HTML výuka a>
  • Co je XHTML?

    CSS pro zobrazení a skrytí Div

    Vytvořte pro svou CSS dvě třídy: jedna pro skrytí div a druhá pro zobrazení. K tomu máte dvě možnosti: zobrazení a viditelnost.

    Displej odstraňuje div z toku stránek a viditelnost změní jeho viditelnost. Někteří kodéry dávají přednost zobrazení , ale někdy viditelnost dává smysl také. Například:

    .přidáno {display: none; } .unhidden {display: block; }}

    Pokud chcete použít viditelnost, změňte tyto třídy na:

    .hidden {viditelnost: skrytá; }. neviditelná {viditelnost: viditelná; }}

    Přidejte skrytou třídu do svého divu tak, aby se začala skrývat na stránce:

    class = "hidden" >

    JavaScript, aby to fungovalo

    Veškerý tento skript dělá je podívat se na aktuální třídu nastavenou na vaší div a přepíná jej, aby se nezjistila, pokud je označena jako skrytá nebo naopak.

    To je jen pár řádků jazyka JavaScript. Umístěte následující do hlavy dokumentu HTML (před značkou :