Įdėjus paslėptus teksto blokus, vizualinis svetainės puslapio suvokimas pagerėja - jis į naršyklę įkraunamas tiksliai taip, kaip dizaineris jį sukūrė, neatsižvelgiant į paskelbtos informacijos kiekį. Be to, lankytojui patogiau - ieškodamas reikalingo informacijos bloko, jis neturi peržiūrėti viso masyvo, o tik mažus „ledkalnių antgalius“.
Tai būtina
Pagrindinės žinios apie HTML ir „JavaScript“
Nurodymai
1 žingsnis
Norėdami paslėpti ir HTML puslapyje pateikti norimus teksto blokus, naudokite pasirinktinę „JavaScript“funkciją. Bendra visų blokų funkcija yra daug patogesnė nei pridėti kodą prie kiekvieno iš jų atskirai. Puslapio šaltinio kodo antraštėje įdėkite atidarymo ir pabaigos scenarijaus žymas ir tarp jų sukurkite tuščią funkciją su pavadinimu, pvz., „Swap“ir vienu būtinu įvesties parametro ID: function swap (id) {}
2 žingsnis
Prie funkcijos turinio, tarp garbanotų petnešų, pridėkite dvi „JavaScript“kodo eilutes. Pirmoje eilutėje turėtų būti nurodyta dabartinė teksto bloko būsena - ar jo matomumas įjungtas, ar išjungtas. Dokumente gali būti keli tokie blokai, todėl kiekvienas turi turėti savo identifikatorių - būtent jo funkcija gauna ID kaip vienintelį įvesties parametrą. Naudodamas šį identifikatorių, jis ieško reikiamo dokumento bloko, priskirdamas matomumo / nematomumo vertę (ekrano ypatybės būseną) kintamajam „sDisplay“: sDisplay = document.getElementById (id).style.display;
3 žingsnis
Antroji eilutė turėtų pakeisti norimo teksto bloko rodymo ypatybę į priešingą - paslėpti, jei tekstas matomas, ir parodyti, ar jis paslėptas. Tai galima padaryti su šiuo kodu: document.getElementById (id).style.display = sDisplay == 'nėra'? '': 'nė vienas';
4 žingsnis
Į antraštės skyrių pridėkite šį stiliaus lapą: a {cursor: pointer} Jums to reikės, kad pelės žymeklis būtų rodomas teisingai, kai užveskite pelės žymeklį ant neišsamios nuorodos žymos. Naudodamiesi tokiomis nuorodomis, jūs organizuojate puslapyje perjungti teksto blokų matomumą / nematomumą.
5 žingsnis
Įdėkite šias perjungimo nuorodas į tekstą prieš kiekvieną paslėptą bloką, o teksto pabaigoje esančiuose blokuose pridėkite panašią nuorodą. Įtraukite nematomą tekstą į žymes, kurių stiliaus atributuose yra nustatytas nematomumas. Pvz.: Išplėsti tekstą +++ Tai yra paslėptas tekstas --- Šiame pavyzdyje spustelėjus nuorodą „trys plius“, „onClick“įvykyje bus iškviesta aukščiau nurodyta funkcija, perduodant matomo bloko ID. O bloko viduje yra trijų minusų nuoroda su tomis pačiomis funkcijomis - paspaudus ant jos bus paslėptas tekstas.
6 žingsnis
Sukurkite reikiamą skaičių teksto blokų, panašų į aprašytą ankstesniame žingsnyje, nepamirškite pakeisti ID žymos ID atribute ir kintamajame, kurį funkcijai perdavė įvykis „onClick“dviejose nuorodose.
