Het plaatsen van verborgen tekstblokken verbetert de visuele waarneming van een webpagina - het laadt in de browser precies zoals de ontwerper het heeft ontworpen, ongeacht de hoeveelheid geposte informatie. Bovendien is het voor de bezoeker handiger - op zoek naar het benodigde blok informatie hoeft hij niet door het hele array te kijken, maar alleen kleine "topjes van de ijsberg".
Het is nodig
Basiskennis van HTML en JavaScript
instructies:
Stap 1
Gebruik een aangepaste JavaScript-functie om de gewenste tekstblokken op een HTML-pagina te verbergen en weer te geven. Een gemeenschappelijke functie voor alle blokken is veel handiger dan het toevoegen van code aan elk afzonderlijk. Plaats in het kopgedeelte van de broncode van de pagina de openings- en sluitingsscript-tags en maak daartussen een lege functie met een naam, bijvoorbeeld swap en een vereiste invoerparameter id: function swap (id) {}
Stap 2
Voeg twee regels JavaScript-code toe aan de hoofdtekst van de functie, tussen de accolades. De eerste regel zou de huidige staat van het tekstblok moeten lezen - of de zichtbaarheid ervan aan of uit is. Er kunnen meerdere van dergelijke blokken in een document zijn, dus elk moet zijn eigen identifier hebben - het is zijn functie die id ontvangt als de enige invoerparameter. Met behulp van deze identifier zoekt het naar het benodigde blok in het document, waarbij de zichtbaarheids-/onzichtbaarheidswaarde (de status van de eigenschap display) wordt toegewezen aan de sDisplay-variabele: sDisplay = document.getElementById (id).style.display;
Stap 3
De tweede regel zou de weergave-eigenschap van het gewenste tekstblok in het tegenovergestelde moeten veranderen - verberg als de tekst zichtbaar is en laat zien als het verborgen is. Dit kan met de volgende code: document.getElementById (id).style.display = sDisplay == 'none'? '': 'geen';
Stap 4
Voeg de volgende stylesheet toe aan de koptekst: a {cursor: pointer} Deze heb je nodig om de muisaanwijzer correct weer te geven als je met de muis over een onvolledige link-tag gaat. Met behulp van dergelijke links organiseer je op de pagina de zichtbaarheid / onzichtbaarheid van tekstblokken.
Stap 5
Plaats deze schakellinks in de tekst vóór elk verborgen blok en voeg in de blokken aan het einde van de tekst een vergelijkbare link toe. Omsluit onzichtbare tekst in span-tags waarvoor onzichtbaarheid is ingesteld in hun stijlattributen. Bijvoorbeeld: Tekst uitvouwen +++ Dit is verborgen tekst --- In dit voorbeeld zal het klikken op een drie plus-link de bovenstaande functie op de onClick-gebeurtenis oproepen, waarbij het de ID van het blok wordt doorgegeven dat zichtbaar moet worden gemaakt. En in het blok is er een link van drie minnen met dezelfde functies - erop klikken zal de tekst verbergen.
Stap 6
Maak het vereiste aantal tekstblokken, vergelijkbaar met degene die in de vorige stap is beschreven, en denk eraan de ID's in het id-attribuut van de span-tag en in de variabele die door de onClick-gebeurtenis in de twee links aan de functie is doorgegeven, te wijzigen.
