Å plassere skjulte tekstblokker forbedrer den visuelle oppfatningen av en nettside - den lastes inn i nettleseren nøyaktig slik designeren designet den, uavhengig av mengden informasjon som er lagt ut. I tillegg er det mer praktisk for den besøkende - på jakt etter den nødvendige informasjonsblokken trenger han ikke å se gjennom hele matrisen, men bare små "tips på isfjellene".
Det er nødvendig
Grunnleggende kunnskap om HTML og JavaScript
Bruksanvisning
Trinn 1
Bruk en tilpasset JavaScript-funksjon for å skjule og vise de ønskede tekstblokkene på en HTML-side. En vanlig funksjon for alle blokker er mye mer praktisk enn å legge til kode til hver av dem separat. I topptekstdelen av kildekoden til siden, plasserer du kodene for åpning og lukking av skript, og mellom dem oppretter du en tom funksjon med et navn, for eksempel bytte og en nødvendig inndataparameter-ID: funksjonsbytte (id) {}
Steg 2
Legg til to linjer JavaScript-kode i funksjonen, mellom de krøllete bukkene. Den første linjen skal lese den nåværende tilstanden til tekstblokken - om synligheten er på eller av. Det kan være flere slike blokker i et dokument, så hver må ha sin egen identifikator - det er hans funksjon som mottar id som den eneste inngangsparameteren. Ved hjelp av denne identifikatoren søker den etter den nødvendige blokken i dokumentet, og tilordner synlighets- / usynlighetsverdien (tilstanden til visningsegenskapen) til sDisplay-variabelen: sDisplay = document.getElementById (id).style.display;
Trinn 3
Den andre linjen skal endre visningsegenskapen til ønsket tekstblokk til det motsatte - skjul hvis teksten er synlig, og vis om den er skjult. Dette kan gjøres med følgende kode: document.getElementById (id).style.display = sDisplay == 'none'? '': 'ingen';
Trinn 4
Legg til følgende stilark i overskriftsseksjonen: a {markør: peker} Du trenger dette for å vise musepekeren riktig når du holder markøren over en ufullstendig koblingstag. Ved hjelp av slike lenker organiserer du på siden for å skifte synlighet / usynlighet av tekstblokker.
Trinn 5
Plasser disse vekselkoblingene i teksten før hver skjulte blokk, og i blokkene på slutten av teksten, legg til en lignende lenke. Legg usynlig tekst i spennkoder som har usynlighet angitt i stilattributtene. For eksempel: Utvid tekst +++ Dette er skjult tekst --- I dette eksemplet, ved å klikke på en lenke med tre pluss, blir funksjonen ovenfor kalt på onClick-hendelsen og overført IDen til blokken som skal synliggjøres. Og inne i blokken er det en lenke med tre minuser med de samme funksjonene - å klikke på den skjuler teksten.
Trinn 6
Lag det nødvendige antallet tekstblokker, som ligner på det som ble beskrevet i forrige trinn, og husk å endre ID-ene i id-attributtet til span-taggen og i variabelen som ble overført til funksjonen av onClick-hendelsen i de to koblingene.
