Ipakita at Itago ang Teksto o Mga Larawan Gamit ang CSS at JavaScript

Gumawa ng isang karanasan sa estilo ng application sa iyong mga website

Pinapayagan ka ng Dynamic HTML (DHTML) na lumikha ng isang karanasan sa estilo ng application sa iyong mga website, na binabawasan ang dalas na kailangang ma-load ang buong mga pahina. Sa mga application, kapag nag-click ka sa isang bagay, ang application ay agad na nagbabago upang ipakita ang partikular na nilalaman o upang ibigay sa iyo ang iyong sagot.

Sa kaibahan, ang mga webpage ay karaniwang kailangang i-reload, o isang buong bagong pahina ay kailangang i-load. Ito ay maaaring gumawa ng karanasan ng gumagamit mas disjointed. Ang iyong mga customer ay kailangang maghintay para mag-load ang unang pahina at pagkatapos ay maghintay muli para mag-load ang pangalawang pahina, at iba pa.

Paggamit ng & lt; div & gt; upang mapabuti ang Karanasan ng Viewer

Ang paggamit ng DHTML, isa sa mga pinakamadaling paraan upang mapabuti ang karanasang ito ay ang magkaroon ng mga elemento ng div na magpalipat-lipat at magpapakita ng nilalaman kapag hiniling ito. Ang isang elemento ng div ay tumutukoy sa mga lohikal na dibisyon sa iyong webpage. Isipin ang isang div bilang isang kahon na maaaring maglaman ng mga talata, mga pamagat, mga link, mga larawan, at iba pang mga div.

Ano ang Kakailanganin mo

Upang lumikha ng div na maaaring i-on at off, kailangan mo ang sumusunod:

Ang Pagkontrol ng Link

Ang pagkontrol ng link ay ang pinakamadaling bahagi. Lamang lumikha ng isang link na gusto mo sa isa pang pahina. Sa ngayon, iwanang blangko ang href na katangian.

Matuto nang HTML

Ilagay ito kahit saan sa iyong webpage.

Ang Div upang Ipakita at Itago

Lumikha ng div element na nais mong ipakita at itago. Tiyakin na ang iyong div ay may natatanging id dito. Sa halimbawa, ang natatanging id ay natututo ng HTML .

Ito ang hanay ng nilalaman. Nagsisimula itong blangko maliban para sa tekstong paliwanag na ito. Piliin kung ano ang gusto mong matutunan sa hanay ng nabigasyon sa kaliwa. Ang teksto ay lilitaw sa ibaba:

Dagdagan ang HTML
  • Libreng HTML Class
  • Tutorial sa HTML
  • Ano ang XHTML?

    Ang CSS upang Ipakita at Itago ang Div

    Gumawa ng dalawang klase para sa iyong CSS: isa upang itago ang div at ang iba pang upang ipakita ito. Mayroon kang dalawang pagpipilian para sa: display at visibility.

    Inaalis ng display ang div mula sa daloy ng pahina, at ang pagbabago ay nagbabago lamang kung paano ito nakikita. Ang ilang mga coder ay gustung-gusto ang pagpapakita , ngunit kung minsan ang pagkakatulad ay makatuwiran din. Halimbawa:

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

    Kung nais mong gamitin ang visibility, pagkatapos ay baguhin ang mga klase sa:

    .hidden {visibility: nakatago; } .unhidden {visibility: nakikita; }

    Idagdag ang nakatagong klase sa iyong div upang magsimula ito bilang nakatago sa pahina:

    class = "hidden" >

    JavaScript upang Gawing Magtrabaho

    Ang lahat ng script na ito ay tumingin sa kasalukuyang klase set sa iyong div at i-toggle ito upang unhidden kung ito ay minarkahan bilang nakatago o vice versa.

    Ito ay ilan lamang sa mga linya ng JavaScript. Ilagay ang sumusunod sa ulo ng iyong HTML na dokumento (bago ang tag ng :