Teksti või piltide näitamine ja peitmine CSS-i ja JavaScripti abil

Looge oma veebisaitidel rakenduse stiili kogemus

Dünaamiline HTML (DHTML) võimaldab teil oma veebisaitidel luua rakenduste stiili, vähendades kogu lehekülgede täieliku laadimise sagedust. Rakendustes, kui klõpsate midagi, muutub rakendus vahetult selle konkreetse sisu näitamiseks või teie vastuse saamiseks.

Seevastu veebilehti tuleb tavaliselt laadida või kogu uus leht tuleb laadida. See võib muuta kasutajate kogemused rohkem lahti. Teie kliendid peavad ootama esimese lehe laadimist ja seejärel ootama teise lehe laadimist ja nii edasi.

Kasutades & lt; div> kuvari kogemuse täiustamine

DHTMLi kasutamine on üks lihtsamaid viise selle kogemuse täiustamiseks, kui soovite, et divi- elemente sisse ja välja lülitada, kui soovite, et sisu kuvatakse, kui seda taotletakse. Div-element määrab teie veebilehele loogilised jagunemised. Mõelge divile kui kasti, mis võib sisaldada lõiku, pealkirja, lingid, pilte ja isegi teisi vigu.

Mida vajate

Divi loomiseks, mida saab sisse ja välja lülitada, on vaja järgmist.

Juhtimislink

Juhtlüli on kõige lihtsam osa. Lihtsalt looge link, nagu oleksite teisele lehele. Praegu jäta href-i atribuut tühjaks.

Õpi HTML-i

Asetage see kuhugi oma veebilehele.

Div näitab ja peidab

Loo div-element, mida soovite näidata ja peita. Veenduge, et teie divil on sellel unikaalne ID. Näites on unikaalne ID õppida HTML-i .

See on sisu veerg. See algab tühjaks, välja arvatud see selgitus tekst. Valige, mida soovite õppida vasakul asuvas navigeerimisveerus. Allpool on tekst:

Õpi HTML
  • Vaba HTML-klassi
  • HTML-õpetus
  • Mis on XHTML?

    CSS, mis näitab ja peidab divi

    Loo oma CSS-i jaoks kaks klassi: üks peitub div ja teine, et seda näidata. Selle jaoks on teil kaks võimalust: kuvamine ja nähtavus.

    Displei eemaldab divi lehe voo ja nähtavust muudab lihtsalt selle nähtavust. Mõned koodijad eelistavad kuva , kuid mõnikord on ka nähtavus mõistlik. Näiteks:

    .hidden {display: none; }; unhidden {display: block; }

    Kui soovite kasutada nähtavust, siis muutke neid klasse järgmiselt:

    .hidden {nähtavus: peidetud; }. unhidden {nähtavus: nähtav; }

    Lisage peidetud klass oma divi, nii et see algab lehel peidetud pealt:

    class = "hidden" >

    JavaScript, et see töötab

    Kogu see skript vaatab teie divi jaoks määratud praegust klassi ja lülitab selle peitmata, kui see on märgitud peidetud või vastupidi.

    See on vaid mõned JavaScripti read. Asetage HTML-dokumendi päis järgmine (enne tag: