Ang paglalagay ng mga nakatagong bloke ng teksto ay nagpapabuti sa visual na pang-unawa ng isang pahina ng website - naglo-load ito sa browser nang eksakto tulad ng disenyo ng taga-disenyo nito, anuman ang dami ng impormasyong nai-post. Bilang karagdagan, ito ay mas maginhawa para sa bisita - sa paghahanap ng kinakailangang bloke ng impormasyon, hindi niya kailangang tumingin sa buong array, ngunit maliit lamang na "mga tip ng mga iceberg".
Kailangan iyon
Pangunahing kaalaman sa HTML at JavaScript
Panuto
Hakbang 1
Gumamit ng isang pasadyang pagpapaandar ng JavaScript upang maitago at ipakita ang nais na mga bloke ng teksto sa isang pahina ng HTML. Ang isang karaniwang pag-andar para sa lahat ng mga bloke ay mas maginhawa kaysa sa pagdaragdag ng code sa bawat isa sa kanila nang magkahiwalay. Sa bahagi ng header ng source code ng pahina, ilagay ang pambungad at pagsasara ng mga tag ng script, at sa pagitan ng mga ito lumikha ng isang walang laman na function na may isang pangalan, halimbawa, palitan at isang kinakailangang input parameter id: function swap (id) {}
Hakbang 2
Magdagdag ng dalawang linya ng JavaScript code sa katawan ng pagpapaandar, sa pagitan ng mga kulot na brace. Dapat basahin ng unang linya ang kasalukuyang estado ng bloke ng teksto - kung ang visibility nito ay naka-on o naka-off. Maaaring maraming mga naturang mga bloke sa isang dokumento, kaya't ang bawat isa ay dapat magkaroon ng sariling pagkakakilanlan - ito ay ang kanyang pagpapaandar na tumatanggap ng id bilang nag-iisang parameter ng pag-input. Gamit ang identifier na ito, naghahanap ito ng kinakailangang bloke sa dokumento, na itinatalaga ang halaga ng kakayahang makita / hindi makita (ang estado ng ipinapakita na pag-aari) sa variable na sDisplay: sDisplay = document.getElementById (id).style.display;
Hakbang 3
Dapat baguhin ng pangalawang linya ang pag-aari ng display ng nais na bloke ng teksto sa kabaligtaran - itago kung ang teksto ay nakikita, at ipakita kung ito ay nakatago. Magagawa ito sa sumusunod na code: document.getElementById (id).style.display = sDisplay == 'none'? '': 'wala';
Hakbang 4
Idagdag ang sumusunod na styleheet sa seksyon ng header: isang {cursor: pointer} Kakailanganin mo ito upang maipakita nang tama ang mouse pointer kapag nag-hover ka sa isang hindi kumpletong tag ng link. Sa tulong ng mga naturang link, ayusin mo sa pahina ang pag-toggle ng kakayahang makita / hindi makita ng mga bloke ng teksto.
Hakbang 5
Ilagay ang mga toggle link na ito sa teksto bago ang bawat nakatagong bloke, at sa mga bloke sa dulo ng teksto, magdagdag ng isang katulad na link. I-enclose ang hindi nakikitang teksto sa mga tag ng span na may kakayahang makita ng kanilang mga katangian ng istilo. Halimbawa: Palawakin ang teksto +++ Ito ay nakatagong teksto --- Sa halimbawang ito, ang pag-click sa isang link na tatlong plus ay tatawag sa pagpapaandar sa itaas sa kaganapan saClick, na ipinapasa ang ID ng bloke upang gawing nakikita. At sa loob ng bloke ay may isang link ng tatlong mga minus na may parehong mga pag-andar - ang pag-click dito ay maitatago ang teksto.
Hakbang 6
Lumikha ng kinakailangang bilang ng mga bloke ng teksto, katulad ng inilarawan sa nakaraang hakbang, na naaalala na palitan ang mga ID sa katangian ng id ng span tag at sa variable na ipinasa sa pagpapaandar ng onClick na kaganapan sa dalawang mga link.
