Placering af skjulte tekstblokke forbedrer den visuelle opfattelse af en websideside - den indlæses i browseren nøjagtigt, som designeren designede den, uanset mængden af oplysninger, der blev sendt. Derudover er det mere bekvemt for den besøgende - på jagt efter den nødvendige informationsblok behøver han ikke at se igennem hele matrixen, men kun små "tip af isbjerge".
Er det nødvendigt
Grundlæggende viden om HTML og JavaScript
Instruktioner
Trin 1
Brug en tilpasset JavaScript-funktion til at skjule og vise de ønskede tekstblokke på en HTML-side. En fælles funktion for alle blokke er meget mere praktisk end at tilføje kode til hver af dem separat. I sidehoveddelen af kildekoden på siden skal du placere de åbne og lukke script-tags og mellem dem oprette en tom funktion med et navn, for eksempel swap og en krævet inputparameter-id: function swap (id) {}
Trin 2
Føj to linjer JavaScript-kode til funktionens brødtekst mellem de krøllede seler. Den første linje skal læse den aktuelle tilstand for tekstblokken - uanset om dens synlighed er slået til eller fra. Der kan være flere sådanne blokke i et dokument, så hver skal have sin egen identifikator - det er hans funktion, der modtager id som den eneste inputparameter. Ved hjælp af denne identifikator søger den efter den nødvendige blok i dokumentet og tildeler synligheds- / usynlighedsværdien (tilstanden for skærmegenskaben) til sDisplay-variablen: sDisplay = document.getElementById (id).style.display;
Trin 3
Den anden linje skal ændre visningsegenskaben for den ønskede tekstblok til det modsatte - skjul, hvis teksten er synlig, og vis om den er skjult. Dette kan gøres med følgende kode: document.getElementById (id).style.display = sDisplay == 'none'? '': 'ingen';
Trin 4
Føj følgende typografiark til overskriftsafsnittet: a {cursor: pointer} Du skal bruge dette for at få vist musemarkøren korrekt, når du holder markøren over et ufuldstændigt linktag. Ved hjælp af sådanne links organiserer du på siden for at skifte synlighed / usynlighed af tekstblokke.
Trin 5
Placer disse skiftekoblinger i teksten før hver skjult blok, og i blokkene i slutningen af teksten skal du tilføje et lignende link. Omslut usynlig tekst i span-tags, der har usynlighed angivet i deres stilattributter. For eksempel: Udvid tekst +++ Dette er skjult tekst --- I dette eksempel vil et klik på et tre plus-link kalde ovenstående funktion på onClick-begivenheden og overføre den id for den blok, der skal synliggøres. Og inde i blokken er der et link med tre minus med de samme funktioner - ved at klikke på det skjules teksten.
Trin 6
Opret det krævede antal tekstblokke svarende til det, der blev beskrevet i det foregående trin, og husk at ændre id'erne i id-attributten for span-tagget og i den variabel, der blev sendt til funktionen af onClick-begivenheden i de to links.
