Montre ak kache tèks oswa Imaj Avèk CSS ak JavaScript

Kreye yon eksperyans aplikasyon-style sou sit entènèt ou

Dinamik HTML (DHTML) pèmèt ou kreye yon eksperyans aplikasyon-style sou sit entènèt ou, diminye frekans la ke paj antye dwe konplètman chaje. Nan aplikasyon yo, lè ou klike sou yon bagay, aplikasyon an imedyatman chanje yo montre ke kontni espesifik oswa bay ou ak repons ou an.

Nan Kontrèman, paj wèb tipikman gen yo dwe rechaje, oswa yon paj tout nouvo dwe chaje. Sa a ka fè itilizatè a eksperyans plis disjointed. Kliyan ou yo dwe rete tann pou premye paj la chaje ak Lè sa a, rete tann ankò pou dezyèm paj la chaj, ak sou sa.

Sèvi ak & lt; div & gt; Pou amelyore eksperyans Viewer

Sèvi ak DHTML, youn nan fason ki pi fasil pou amelyore eksperyans sa a se pou fè divès eleman sou ak sou yo pou yo montre kontni lè yo mande l. Yon eleman div defini divizyon lojik sou Paj Web ou. Reflechi sou yon div kòm yon bwat ki ka gen ladan paragraf, tit, lyen, imaj, e menm lòt divs.

Ki sa ou bezwen?

Yo nan lòd yo kreye yon div ki ka bwose sou yo ak sou, ou bezwen sa ki annapre yo:

Lyen kontwole a

Lyen kontwole se pati ki pi fasil. Senpleman kreye yon lyen tankou ou ta nan yon lòt paj. Pou kounye a, kite atribi href vid la.

Aprann HTML

Mete sa a nenpòt kote sou Paj Web ou.

Div la montre ak kache

Kreye eleman div la ou vle montre epi kache. Asire ke div ou gen yon id inik sou li. Nan egzanp lan, ID a inik se aprann HTML .

Sa a se kolòn nan kontni. Li kòmanse soti eksepte pou tèks eksplikasyon sa a. Chwazi sa ou vle aprann nan kolòn nan Navigasyon sou bò gòch la. Tèks la ap parèt anba a:

Aprann HTML
  • Gratis Gwoup HTML
  • HTML Tutorial a>
  • Kisa XHTML?

    CSS la montre epi kache div la

    Kreye de klas pou CSS ou: youn nan kache div la ak lòt la montre li. Ou gen de opsyon pou sa a: ekspozisyon ak vizibilite.

    Ekspozisyon retire div la soti nan koule nan paj, ak vizibilite jis chanje jan li wè. Gen kèk kodè pito ekspozisyon , men pafwa vizibilite fè sans, tou. Pa egzanp:

    .hidden {ekspozisyon: okenn; } .unhidden {ekspozisyon: blòk; }}

    Si ou vle sèvi ak vizibilite, Lè sa a, chanje klas sa yo nan:

    .hidden {vizibilite: kache; } .unhidden {vizibilite: vizib; }}

    Ajoute klas la kache div ou a ke li kòmanse kòm kache nan paj la:

    class = "hidden" >

    JavaScript fè li travay

    Tout script sa a se gade nan klas la kounye a mete sou div ou ak baskile li nan unhidden si li nan make kòm kache oswa vis vèrsa.

    Sa a se sèlman yon liy kèk nan JavaScript. Mete bagay sa yo nan tèt dokiman HTML ou (anvan tèt la: