La colocación de bloques de texto ocultos mejora la percepción visual de la página de un sitio web: se carga en el navegador exactamente como lo diseñó el diseñador, independientemente de la cantidad de información publicada. Además, es más conveniente para el visitante: en busca del bloque de información necesario, no tiene que mirar a través de toda la matriz, sino solo pequeñas "puntas de los icebergs".
Es necesario
Conocimientos básicos de HTML y JavaScript
Instrucciones
Paso 1
Utilice una función de JavaScript personalizada para ocultar y mostrar los bloques de texto deseados en una página HTML. Una función común para todos los bloques es mucho más conveniente que agregar código a cada uno de ellos por separado. En la parte del encabezado del código fuente de la página, coloque las etiquetas del script de apertura y cierre, y entre ellas cree una función vacía con un nombre, por ejemplo, swap y un parámetro de entrada requerido id: function swap (id) {}
Paso 2
Agregue dos líneas de código JavaScript al cuerpo de la función, entre las llaves. La primera línea debe leer el estado actual del bloque de texto, ya sea que su visibilidad esté activada o desactivada. Puede haber varios bloques de este tipo en un documento, por lo que cada uno debe tener su propio identificador; es su función la que recibe id como el único parámetro de entrada. Con este identificador, busca el bloque necesario en el documento, asignando el valor de visibilidad / invisibilidad (el estado de la propiedad de visualización) a la variable sDisplay: sDisplay = document.getElementById (id).style.display;
Paso 3
La segunda línea debería cambiar la propiedad de visualización del bloque de texto deseado a la opuesta: ocultar si el texto es visible y mostrar si está oculto. Esto se puede hacer con el siguiente código: document.getElementById (id).style.display = sDisplay == 'none'? '': 'ninguno';
Paso 4
Agregue la siguiente hoja de estilo a la sección del encabezado: a {cursor: pointer} Lo necesitará para mostrar el puntero del mouse correctamente cuando pase el cursor sobre una etiqueta de enlace incompleta. Con la ayuda de dichos enlaces, se organiza en la página para alternar la visibilidad / invisibilidad de los bloques de texto.
Paso 5
Coloque estos enlaces de alternancia en el texto antes de cada bloque oculto y, en los bloques al final del texto, agregue un enlace similar. Incluya texto invisible en etiquetas de tramo que tengan la invisibilidad establecida en sus atributos de estilo. Por ejemplo: Expandir texto +++ Este es texto oculto --- En este ejemplo, hacer clic en un enlace de tres más llamará a la función anterior en el evento onClick, pasándole el ID del bloque que se hará visible. Y dentro del bloque hay un enlace de tres menos con las mismas funciones; al hacer clic en él, se ocultará el texto.
Paso 6
Cree el número requerido de bloques de texto, similar al descrito en el paso anterior, recordando cambiar los ID en el atributo id de la etiqueta span y en la variable pasada a la función por el evento onClick en los dos enlaces.
