Sýna og fela texta eða myndir með CSS og JavaScript

Búðu til reynslu af forritastíl á vefsíðum þínum

Dynamic HTML (DHTML) gerir þér kleift að búa til forritastílupplifun á vefsvæðum þínum og dregur úr tíðni að öll síðurnar séu að fullu hlaðnir. Í forritum, þegar þú smellir á eitthvað breytist forritið strax til að sýna þetta tiltekna efni eða gefa þér svarið.

Hins vegar þarf að endurhlaða vefsíður á nýjan hátt, eða að hella upp nýjum blaðsíðu. Þetta getur valdið því að notandinn reynir meira samhliða. Viðskiptavinir þínir verða að bíða eftir að fyrstu blaðsíðan er hlaðið og síðan bíða aftur til seinni síðu til að hlaða inn og svo framvegis.

Notkun & lt; div & gt; til að bæta upplifun áhorfenda

Notkun DHTML er ein auðveldasta leiðin til að bæta þessa reynslu með því að hafa div- þætti kveikt og slökkt á því að birta efni þegar það er beðið um það. Div-þáttur skilgreinir rökréttar deildir á vefsíðunni þinni. Hugsaðu um div sem kassa sem getur innihaldið málsgreinar, fyrirsagnir, tengla, myndir og jafnvel aðra divs.

Það sem þú þarft

Til þess að búa til div sem hægt er að kveikja og slökkva á þarftu eftirfarandi:

Stjórnandi hlekkur

Stjórnandi hlekkur er auðveldasta hluti. Búðu til einfaldlega tengla eins og þú vilt á aðra síðu. Fyrir nú skaltu yfirgefa href eiginleiki.

Lærðu HTML

Setjið þetta hvar sem er á vefsíðunni þinni.

The Div til að sýna og fela

Búðu til div-þáttinn sem þú vilt sýna og fela. Gakktu úr skugga um að div þín hafi einstakt auðkenni á því. Í dæminu er einstakt auðkenni kennt HTML .

Þetta er efnis dálkurinn. Það byrjar út autt nema fyrir þessa skýringu texta. Veldu hvað þú vilt læra í flipanum til vinstri. Textinn birtist hér fyrir neðan:

Lærðu HTML
  • Ókeypis HTML Class
  • HTML Tutorial
  • Hvað er XHTML?

    The CSS til að sýna og fela Div

    Búðu til tvær flokkar fyrir CSS þinn: einn til að fela div og hitt til að sýna það. Þú hefur tvo kosti fyrir þetta: sýning og sýnileiki.

    Skjárinn fjarlægir div frá blaðsíðunni og sýnileiki breytir því hvernig það sést. Sumir coders vilja sýna , en stundum er sýnileiki líka skynsamlegt. Til dæmis:

    .hidden {sýna: none; }. óháð {sýna: blokk; }

    Ef þú vilt nota sýnileika skaltu breyta þessum flokkum til:

    .hidden {sýnileiki: falinn; } .hvort {sýnileiki: sýnilegur; }

    Bættu falinn flokk við div þinn svo að það byrji sem falinn á síðunni:

    class = "hidden" >

    JavaScript til að gera það virka

    Allt þetta handrit er að líta á núverandi flokksgrein á divnum þínum og skiptir því yfir í óskert ef það er merkt sem falið eða öfugt.

    Þetta eru aðeins nokkrar línur af JavaScript. Settu eftirfarandi í höfuðið á HTML skjalinu þínu (áður en merki: