Att placera dolda textblock förbättrar den visuella uppfattningen av en webbplats - den laddas in i webbläsaren precis som designern designade den, oavsett hur mycket information som publicerats. Dessutom är det bekvämare för besökaren - på jakt efter nödvändigt informationsblock behöver han inte titta igenom hela utbudet, utan bara små "tips på isbergen".
Det är nödvändigt
Grundläggande kunskaper om HTML och JavaScript
Instruktioner
Steg 1
Använd en anpassad JavaScript-funktion för att dölja och visa önskade textblock på en HTML-sida. En vanlig funktion för alla block är mycket bekvämare än att lägga till kod till var och en av dem separat. I sidhuvudets del av källkoden på sidan, placera de inledande och stängande skripttaggarna, och mellan dem skapa en tom funktion med ett namn, till exempel swap och en önskad ingångsparameter-id: funktionsbyte (id) {}
Steg 2
Lägg till två rader JavaScript-kod i kroppens funktion, mellan de lockiga hängslen. Den första raden ska läsa det aktuella läget för textblocket - om dess synlighet är på eller av. Det kan finnas flera sådana block i ett dokument, så var och en måste ha sin egen identifierare - det är hans funktion som får id som den enda inmatningsparametern. Med den här identifieraren söker den efter det nödvändiga blocket i dokumentet och tilldelar synlighets- / osynlighetsvärdet (status för visningsegenskapen) till sDisplay-variabeln: sDisplay = document.getElementById (id).style.display;
Steg 3
Den andra raden bör ändra visningsegenskapen för önskat textblock till motsatsen - dölj om texten är synlig och visa om den är dold. Detta kan göras med följande kod: document.getElementById (id).style.display = sDisplay == 'none'? '': 'ingen';
Steg 4
Lägg till följande formatmall i rubriksektionen: a {markör: pekare} Du behöver detta för att visa muspekaren korrekt när du håller muspekaren över en ofullständig länktagg. Med hjälp av sådana länkar organiserar du på sidan för att växla synlighet / osynlighet för textblock.
Steg 5
Placera dessa växlingslänkar i texten före varje dolt block, och i blocken i slutet av texten, lägg till en liknande länk. Bifoga osynlig text i span-taggar som har osynlighet i sina stilattribut. Till exempel: Expandera text +++ Detta är dold text --- I det här exemplet klickar du på en länk med tre plus för att anropa ovanstående funktion på onClick-händelsen och överföra den ID för blocket som ska synas. Och inuti blocket finns en länk med tre minus med samma funktioner - genom att klicka på den döljs texten.
Steg 6
Skapa det önskade antalet textblock, som liknar det som beskrivs i föregående steg, kom ihåg att ändra ID: n i id-attributet för span-taggen och i variabeln som skickas till funktionen av onClick-händelsen i de två länkarna.
