La col·locació de blocs de text ocults millora la percepció visual d'una pàgina web: es carrega al navegador exactament tal com el va dissenyar el dissenyador, independentment de la quantitat d'informació publicada. A més, és més convenient per al visitant: a la recerca del bloc d'informació necessari, no ha de mirar a través de tota la matriu, sinó només petites "puntes dels icebergs".
És necessari
Coneixements bàsics d'HTML i JavaScript
Instruccions
Pas 1
Utilitzeu una funció JavaScript personalitzada per amagar i mostrar els blocs de text desitjats en una pàgina HTML. Una funció comuna per a tots els blocs és molt més convenient que afegir codi a cadascun d’ells per separat. A la part de capçalera del codi font de la pàgina, col·loqueu les etiquetes de seqüència d'obertura i tancament i entre elles creeu una funció buida amb un nom, per exemple, swap i un identificador de paràmetre d'entrada obligatori: swap de funció (id) {}
Pas 2
Afegiu dues línies de codi JavaScript al cos de la funció, entre les claus. La primera línia hauria de llegir l’estat actual del bloc de text, tant si la seva visibilitat està activada com desactivada. Hi pot haver diversos blocs d’aquest tipus en un document, de manera que cadascun ha de tenir el seu propi identificador: la seva funció és la que rep l’identificador com a únic paràmetre d’entrada. Mitjançant aquest identificador, busca el bloc necessari al document, assignant el valor de visibilitat / invisibilitat (l’estat de la propietat de visualització) a la variable sDisplay: sDisplay = document.getElementById (id).style.display;
Pas 3
La segona línia hauria de canviar la propietat de visualització del bloc de text desitjat a la contrària: ocultar si el text és visible i mostrar si està ocult. Això es pot fer amb el codi següent: document.getElementById (id).style.display = sDisplay == 'none'? '': 'cap';
Pas 4
Afegiu el següent full d'estil a la secció de capçalera: a {cursor: pointer} El necessitareu per mostrar correctament el punter del ratolí quan passeu el cursor per sobre d'una etiqueta d'enllaç incompleta. Amb l’ajut d’aquests enllaços, organitzeu a la pàgina per canviar la visibilitat / invisibilitat dels blocs de text.
Pas 5
Col·loqueu aquests enllaços de commutació al text abans de cada bloc ocult i, als blocs del final del text, afegiu un enllaç similar. Incloeu text invisible a les etiquetes d’interval que tenen la invisibilitat configurada als atributs d’estil. Per exemple: Amplia el text +++ Aquest text és ocult --- En aquest exemple, en fer clic a un enllaç de tres més es cridarà a la funció anterior a l'esdeveniment onClick, passant-li l'identificador del bloc que es farà visible. I dins del bloc hi ha un enllaç de tres menys amb les mateixes funcions: si feu clic damunt, s'amagarà el text.
Pas 6
Creeu el nombre de blocs de text requerit, similar al descrit al pas anterior, recordant de canviar els identificadors de l'atribut id de l'etiqueta span i de la variable que passava a la funció l'esdeveniment onClick als dos enllaços.
