HTML dinamic (DHTML) vă permite să creați o experiență în stilul aplicației pe site-urile dvs. web, reducând frecvența pe care paginile întregi trebuie să fie încărcate complet. În aplicații, când faceți clic pe ceva, aplicația se modifică imediat pentru a afișa acel conținut specific sau pentru a vă oferi răspunsul dvs.
În schimb, paginile web trebuie de obicei reîncărcate sau trebuie încărcată o pagină complet nouă. Acest lucru poate face experiența utilizatorului mai dezunificată. 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 pentru a îmbunătăți experiența vizualizatorului
Folosind DHTML, una dintre cele mai simple modalități de a îmbunătăți această experiență este de a avea div elementele activează și dezactivează pentru a afișa conținutul atunci când este solicitat. A element div definește diviziunile logice pe pagina dvs. web. Gândiți-vă la un div ca la o casetă care poate conține paragrafe, titluri, linkuri, imagini și chiar alte divsuri.
De ce veți avea nevoie
Pentru a crea o divizare care poate fi activată sau dezactivată, aveți nevoie de următoarele:
- Un link pentru a controla divizarea pornindu-l și oprindu-l atunci când faceți clic.
- Div pentru a arăta și a ascunde.
- CSS pentru a stiliza divul ascuns sau vizibil.
- JavaScript pentru a efectua acțiunea.
Legătura de control
Legătura de control este cea mai ușoară parte. Pur și simplu creați un link așa cum ați face către o altă pagină. Deocamdată, părăsiți atribut href gol.
Aflați HTML
Plasați acest lucru oriunde pe pagina dvs. web.
Div de a arăta și ascunde
Creați elementul div pe care doriți să îl afișați și să îl ascundeți. Asigurați-vă că divul dvs. are un id unic pe el. În exemplu, ID-ul unic este învață HTML.
Aceasta este coloana de conținut. Începe gol, cu excepția acestui text 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ă
- Tutorial HTML
- Ce este XHTML?
CSS pentru a arăta și ascunde div
Creați două clase pentru CSS: una pentru a ascunde div și cealaltă pentru ao arăta. Aveți două opțiuni pentru aceasta: afișare și vizibilitate.
Afișajul elimină divizarea din fluxul de pagini, iar vizibilitatea doar schimbă modul în care este văzut. Unii coderi preferă afişa, dar uneori vizibilitate are sens, de asemenea. De exemplu:
.hidden {display: none; }
.unhidden {display: block; }
Dacă doriți să utilizați vizibilitatea, schimbați aceste clase în:
.hidden {vizibilitate: ascuns; }
.unhidden {vizibilitate: vizibil; }
Adăugați clasa ascunsă la div, astfel încât să înceapă ca ascuns pe pagină:
JavaScript pentru a-l face să funcționeze
Tot ce face acest script este să se uite la clasa curentă setată pe div și să o comute la unhidden dacă este marcată ca ascunsă sau invers.
Acestea sunt doar câteva linii de JavaScript. Plasați următoarele în capul dumneavoastră Document HTML (inainte de.
Ce face acest script, rând cu rând:
Apelează funcția dezvăluie, și divID este exact ID-ul unic pe care doriți să îl afișați sau să îl ascundeți.
Configurează o variabilă item cu valoarea div.
Efectuează o verificare simplă a browserului; dacă browserul nu acceptă getElementById, acest script nu va funcționa.
Verifică clasa pe div. Daca este ascuns, îl schimbă în ne ascuns. În caz contrar, îl schimbă în ascuns.
Închide dacă afirmație.
Închide funcția.
Pentru ca scenariul să funcționeze, trebuie să mai faci un lucru. Reveniți la linkul dvs. și adăugați javascriptul la atributul href. Asigurați-vă că utilizați id-ul unic exact pe care l-ați numit div în acest href:
Aflați HTML
Felicitări! Acum aveți un div care se va afișa și ascunde ori de câte ori faceți clic pe un link.
Probleme posibile de care trebuie să fii atent
Acest script nu este nebun. Există câteva situații în care ar putea provoca probleme pentru dvs.:
JavaScript nu este activat. Dacă cititorii dvs. nu au JavaScript sau este dezactivat, acest script nu va funcționa. Diviziunile ascunse rămân ascunse indiferent de ceea ce fac cititorii dvs. O modalitate de a remedia acest lucru este să puneți divs-urile ascunse într-o zonă noscript, dar va trebui să vă jucați pentru a le afișa corect.
Prea mult conținut. Acesta poate fi un instrument excelent pentru a permite cititorilor dvs. să vadă doar conținutul de care au nevoie, dar dacă puneți prea mult în divs-urile ascunse, poate afecta drastic modul în care se încarcă pagina. Amintiți-vă că, deși conținutul nu se afișează, browserul web îl descarcă, deci folosiți bunul simț în cât de mult conținut ascundeți.
Clienții nu înțeleg. În cele din urmă, este posibil ca clienții să nu fie obișnuiți să facă clic pe un link care afișează sau ascunde conținut. Jucați-vă cu pictograme (plus semnele și săgețile funcționează bine) sau text pentru a explica ce se va întâmpla cu clienții dvs. O altă soluție este să lăsați unul dintre div-uri deschise în timp ce celelalte sunt închise. Acest lucru poate transmite ideea clienților dvs., astfel încât aceștia să poată afla mai rapid cum să deschidă conținutul rămas.
Ar trebui să testați întotdeauna codul HTML dinamic astfel cu clienții dvs. Odată ce vă simțiți încrezători că îl pot înțelege și utiliza, aceasta poate fi o modalitate excelentă de a obține o cantitate mare de conținut pe paginile dvs. web fără a ocupa mult spațiu vizibil.