Afișați și ascundeți text sau imagini cu CSS și JavaScript

Creați o experiență în aplicații pe site-urile dvs. web

Dynamic HTML (DHTML) vă permite să creați o experiență în stilul aplicației pe site-urile dvs. web, reducând frecvența că paginile întregi trebuie încărcate complet. În aplicații, când faceți clic pe ceva, aplicația se modifică imediat pentru a afișa conținutul respectiv sau pentru a vă oferi răspunsul.

În schimb, paginile web trebuie în mod obișnuit să fie reîncărcate sau trebuie să fie încărcată o întreagă pagină nouă. Acest lucru poate face ca experiența utilizatorului să fie mai dezbinată. Clienții dvs. trebuie să aștepte încărcarea primei pagini și apoi să aștepte din nou încărcarea celei de-a doua pagini și așa mai departe.

Folosind & lt; div & gt; pentru a îmbunătăți experiența vizualizatorilor

Folosind DHTML, una dintre cele mai ușoare căi de a îmbunătăți această experiență este să activezi și să dezactivezi elemente div pentru a afișa conținut atunci când este solicitat. Un element div definește diviziuni logice pe pagina dvs. Web. Gândiți-vă la un div ca la o cutie care poate conține paragrafe, titluri, linkuri, imagini și chiar și altele.

Ce veți avea nevoie

Pentru a crea o div care poate fi activată și dezactivată, aveți nevoie de următoarele:

Linkul de control

Linia de control este partea cea mai ușoară. Pur și simplu creați un link ca tine ar fi la o altă pagină. Pentru moment, lăsați atributul href gol.

Aflați HTML

Plasați-o oriunde pe pagina dvs. Web.

Divul de afișat și ascuns

Creați elementul div pe care doriți să îl afișați și să îl ascundeți. Asigurați-vă că div-ul dvs. are un ID unic pe acesta. În exemplu, ID-ul unic este să înveți HTML .

Aceasta este coloana de conținut. Începe să fie gol, cu excepția textului explicativ. Alegeți ce doriți să aflați în coloana de navigare din stânga. Textul va apărea mai jos:

Aflați HTML
  • Clasa HTML gratuită
  • HTML Tutorial
  • Ce este XHTML?

    CSS să afișeze și să ascundă Div

    Creați două clase pentru CSS: una pentru a ascunde div și cealaltă pentru a le arăta. Aveți două opțiuni pentru aceasta: afișare și vizibilitate.

    Afișajul elimină divul din fluxul paginii, iar vizibilitatea modifică doar modul în care se vede. Unii coderi preferă afișarea , dar uneori și vizibilitatea are sens. De exemplu:

    .hidden {display: none; }. }

    Dacă doriți să folosiți vizibilitatea, atunci modificați aceste clase la:

    .hidden {visibility: hidden; }. vizibilitate: vizibil; }

    Adăugați clasa ascunsă la div pentru a începe ca ascunsă pe pagină:

    class = "ascuns" >

    JavaScript pentru a face să funcționeze

    Tot ce face acest script este să te uiți la clasa curentă setată pe div și să o dezactivezi pentru a fi ascunsă dacă e marcată ca ascunsă sau invers.

    Aceasta este doar câteva rânduri de JavaScript. Plasați următoarele în capul documentului HTML (înainte de eticheta :