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

Vytvorte na svojich webových stránkach zážitok v štýle aplikácie

ObsahRozbaliť

• Zlepšite divácky zážitok
• Čo budete potrebovať
• Riadiaci odkaz
• Div na zobrazenie a skrytie
• CSS na zobrazenie a skrytie Div
• JavaScript, aby to fungovalo
• Možné problémy

Dynamický HTML (DHTML) vám umožňuje vytvoriť na vašich webových stránkach prostredie v štýle aplikácie, čím sa zníži frekvencia úplného načítania celých stránok. V aplikáciách, keď na niečo kliknete, aplikácia sa okamžite zmení, aby zobrazila konkrétny obsah alebo vám poskytla odpoveď.

Na rozdiel od toho sa webové stránky zvyčajne musia znova načítať alebo sa musí načítať úplne nová stránka. To môže spôsobiť, že používateľský zážitok bude viac nesúrodý. Vaši zákazníci musia počkať, kým sa načíta prvá stránka, a potom znova počkať, kým sa načíta druhá stránka atď.

Chris Schmidt / E+ / Getty Images

Používa sa na zlepšenie zážitku divákov

Používanie DHTML je jedným z najjednoduchších spôsobov, ako zlepšiť túto skúsenosť div prvky sa zapínajú a vypínajú na zobrazenie obsahu, keď je to požadované. A prvok div definuje logické delenie na vašej webovej stránke. Predstavte si div ako rámček, ktorý môže obsahovať odseky, nadpisy, odkazy, obrázky a dokonca aj iné prvky div.

Čo budete potrebovať

Ak chcete vytvoriť div, ktorý možno zapínať a vypínať, potrebujete nasledovné:

• Odkaz na ovládanie prvku div jeho zapnutím a vypnutím po kliknutí.
• Div, ktorý sa má zobraziť a skryť.
• CSS na štýl divu skryté alebo viditeľné.
• JavaScript na vykonanie akcie.

Riadiaci odkaz

Riadiaci článok je najjednoduchšia časť. Jednoducho vytvorte odkaz ako na inú stránku. Zatiaľ nechajte atribút href prázdna.

|_+_|

Umiestnite to kdekoľvek na svojej webovej stránke.

Div, ktorý chcete zobraziť a skryť

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. S výnimkou tohto vysvetľujúceho textu začína prázdne. V navigačnom stĺpci vľavo si vyberte, čo sa chcete naučiť. Text sa zobrazí nižšie:

Naučte sa HTML

• Bezplatná HTML trieda
• HTML návod
• Čo je XHTML?

CSS na zobrazenie a skrytie Div

Vytvorte dve triedy pre svoj CSS: jednu na skrytie prvku div a druhú na jeho zobrazenie. Na to máte dve možnosti: zobrazenie a viditeľnosť.

Display odstráni div z toku stránky a viditeľnosť len zmení spôsob, akým je videný. Niektorí kóderi preferujú displej , ale niekedy viditeľnosť tiež dáva zmysel. Napríklad:

|_+_|

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

|_+_|

Pridajte skrytú triedu do svojho div tak, aby začínala ako skrytá na stránke:

|_+_|

JavaScript, aby to fungovalo

Všetko, čo tento skript robí, je pozrieť sa na aktuálnu triedu nastavenú na vašom div a prepne ju na odkrytú, ak je označená ako skrytá alebo naopak.

Toto je len niekoľko riadkov JavaScriptu. Umiestnite si do hlavy nasledujúce HTML dokument (pred

|_+_|

Čo robí tento skript, riadok po riadku:

1. Zavolá funkciu odkryť , a rozdeliť je presné jedinečné ID, ktoré chcete zobraziť alebo skryť.

2. Nastaví premennú i má s hodnotou vášho div.

3. Vykonáva jednoduchú kontrolu prehliadača; ak prehliadač nepodporuje getElementById , tento skript nebude fungovať.

4. Kontroluje triedu na div. Ak je to skryté , zmení to na neskryté . V opačnom prípade to zmení na skryté .

5. Zatvorí ak vyhlásenie.

6. Zatvorí funkciu.

Aby skript fungoval, musíte urobiť ešte jednu vec. Vráťte sa na svoj odkaz a pridajte javascript do atribútu href. Uistite sa, že ste použili presné jedinečné ID, ktoré ste pomenovali div v tomto href:

|_+_|

Gratulujem! 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 odolný voči chybám. Existujú situácie, v ktorých vám to môže spôsobiť problémy:

1. JavaScript nie je zapnutý. Ak vaši čitatelia nemajú JavaScript alebo je vypnutý, tento skript nebude fungovať. Skryté divy zostávajú skryté bez ohľadu na to, čo robia vaši čitatelia. Jedným zo spôsobov, ako to vyriešiť, je umiestniť skryté divy do oblasti bez skriptu, ale budete sa s tým musieť pohrať, aby sa správne zobrazili.

2. Príliš veľa obsahu. Môže to byť skvelý nástroj, ktorý vašim čitateľom umožní vidieť iba obsah, ktorý potrebujú, ale ak do skrytých divov vložíte príliš veľa, môže to drasticky ovplyvniť načítanie stránky. Pamätajte, že aj keď sa obsah nezobrazuje, webový prehliadač ho stále sťahuje, takže dbajte na to, koľko obsahu skrývate.

3. Zákazníci nerozumejú. Nakoniec, zákazníci nemusia byť zvyknutí klikať na odkaz, ktorý zobrazuje alebo skrýva obsah. Pohrajte sa s ikonami (znamienka plus a šípky fungujú dobre) alebo textom, aby ste vysvetlili, čo sa stane vašim zákazníkom. Ďalším riešením je nechať jeden z divov otvorený, zatiaľ čo ostatné sú zatvorené. To môže sprostredkovať túto myšlienku vašim zákazníkom, takže môžu rýchlejšie prísť na to, ako otvoriť zostávajúci obsah.

Dynamický HTML by ste mali takto vždy testovať so svojimi zákazníkmi. Keď budete mať istotu, že tomu rozumejú a môžu ho používať, môže to byť skvelý spôsob, ako dostať na svoje webové stránky veľké množstvo obsahu bez toho, aby zaberal veľa viditeľného priestoru.