Krijo një përvojë në stilin e aplikacioneve në faqet e internetit
Dinamik HTML (DHTML) ju lejon të krijoni një përvojë në stilin e aplikacioneve në faqet e internetit, duke zvogëluar frekuencën që duhet të ngarkohen plotësisht faqet e tërë. Në aplikacionet, kur klikoni mbi diçka, aplikacioni ndryshon menjëherë për të treguar përmbajtjen specifike ose për t'ju dhënë përgjigjen tuaj.
Në të kundërt, webpages zakonisht duhet të rifreskohen, ose një faqe e re e re duhet të ngarkohet. Kjo mund ta bëjë përvojën e përdoruesit më të çoroditur. Klientët tuaj duhet të presin që faqja e parë të ngarkojë dhe pastaj të presë përsëri për të ngarkuar faqen e dytë dhe kështu me radhë.
Duke përdorur & lt; div & gt; për të përmirësuar përvojën e shikuesit
Duke përdorur DHTML, një nga mënyrat më të lehta për të përmirësuar këtë përvojë është që të ketë elemente të ndara në dhe jashtë për të shfaqur përmbajtjen kur kërkohet. Një element i dytë përcakton ndarjet logjike në faqen tuaj. Mendoni për një div si një kuti që mund të përmbajë paragrafë, tituj, lidhje, imazhe dhe madje edhe div të tjerë.
Çfarë do t'ju nevojitet
Në mënyrë që të krijoni një div që mund të jetë toggled on dhe off, keni nevojë për vijim:
- Një lidhje për të kontrolluar div duke e kthyer atë në dhe jashtë kur klikuar
- Div për të treguar dhe fshehur
- CSS për të stilit të divit të fshehur ose të dukshëm
- JavaScript për të kryer veprimin
Lidhja kontrolluese
Lidhja kontrolluese është pjesa më e lehtë. Thjesht krijoni një lidhje si ju do të një faqe tjetër. Për momentin, lini atributin href bosh.
Mësoni HTMLVendoseni kudo në faqen tuaj.
Div për të treguar dhe fshehur
Krijo elementin e div që dëshironi të tregoni dhe fshehni. Sigurohuni që div juaj ka një id unik mbi të. Në shembull, id unik është mësimi i HTML .
Ky është kolona e përmbajtjes. Fillon bosh përveç për këtë tekst shpjegimi. Zgjidhni atë që dëshironi të mësoni në kolonën e lundrimit në të majtë. Teksti do të shfaqet më poshtë: h3> Mëso HTML h3>
- Klasa e Lirë HTML li>
- Tutorial HTML li> a> li>
- Çfarë është XHTML? li> ul> div> div>
CSS për të treguar dhe fshehur div
Krijo dy klasa për CSS-në tuaj: një për të fshehur divin dhe tjetrin për ta treguar atë. Ju keni dy opsione për këtë: ekran dhe shikueshmëri.
Shfaqja heq divin nga rrjedha e faqes dhe dukshmëria ndryshon vetëm se si shihet. Disa coders preferojnë të shfaqin , por nganjëherë edhe shikimi ka kuptim. Për shembull:
.hidden {display: none; } .unhidden {display: bllok; }Nëse dëshironi të përdorni shikueshmërinë, më pas ndërroni këto klasa në:
fshehur {shikueshmëri: fshehur; } .unhidden {shikueshmëria: e dukshme; }Shtoni klasën e fshehur në div tuaj në mënyrë që ajo të fillojë si e fshehur në faqe:
class = "fshehur" >JavaScript për ta bërë atë punë
E gjithë kjo skenar është të shikoni klasën e tanishme të vendosur në div tuaj dhe ta ndryshoni atë për të shfuqizuar nëse është shënuar si e fshehur ose anasjelltas.
Kjo është vetëm disa rreshta JavaScript. Vendosni në vijim në krye të dokumentit tuaj HTML (përpara tag
: - Tutorial HTML li> a> li>