Trego dhe fsheh tekstin ose imazhet me CSS dhe JavaScript

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:

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 HTML

Vendoseni 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ë: Mëso HTML

  • Klasa e Lirë HTML
  • Tutorial HTML a>
  • Çfarë është XHTML?

    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 :