Mostrar y ocultar texto o imágenes con CSS y JavaScript

Crea una experiencia de estilo de aplicación en tus sitios web El HTML dinámico (DHTML) le permite crear una experiencia de estilo de aplicación en sus sitios web, reduciendo la frecuencia con la que se deben cargar completamente páginas enteras.

Crea una experiencia de estilo de aplicación en tus sitios web

El HTML dinámico (DHTML) le permite crear una experiencia de estilo de aplicación en sus sitios web, reduciendo la frecuencia con la que se deben cargar completamente páginas enteras. En las aplicaciones, cuando hace clic en algo, la aplicación cambia inmediatamente para mostrar ese contenido específico o para proporcionarle su respuesta.

Por el contrario, las páginas web generalmente tienen que volver a cargarse o debe cargarse una página completamente nueva. Esto puede hacer que la experiencia del usuario sea más inconexa. Sus clientes tienen que esperar a que se cargue la primera página y luego esperar nuevamente a que se cargue la segunda página, y así sucesivamente.

Utilizando
mejorar la experiencia del espectador

Usando DHTML, una de las formas más fáciles de mejorar esta experiencia es hacer que los elementos div se activen y desactiven para mostrar contenido cuando se solicite. Un elemento div define divisiones lógicas en su página web. Piense en un div como un cuadro que puede contener párrafos, encabezados, enlaces, imágenes e incluso otros divs.

Lo que necesitarás

Para crear un div que se pueda activar y desactivar, necesita lo siguiente:

  • Un enlace para controlar el div activándolo y desactivándolo al hacer clic.
  • El div para mostrar y ocultar.
  • CSS para diseñar el div oculto o visible.
  • JavaScript para realizar la acción.

El enlace de control

El enlace de control es la parte más fácil. Simplemente cree un enlace como lo haría a otra página. Por ahora, deje el atributo href en blanco.

  Aprender HTML  

Coloque esto en cualquier lugar de su página web.

El div para mostrar y ocultar

Cree el elemento div que desea mostrar y ocultar. Asegúrate de que tu div tenga una identificación única. En el ejemplo, la identificación única es aprender HTML .


Esta es la columna de contenido. Comienza en blanco excepto por este texto explicativo. Elija lo que quiere aprender en la columna de navegación a la izquierda. El texto aparecerá a continuación:



Aprender HTML





El CSS para mostrar y ocultar el div

Cree dos clases para su CSS: una para ocultar el div y la otra para mostrarlo. Tiene dos opciones para esto: visualización y visibilidad.

La pantalla elimina el div del flujo de la página, y la visibilidad solo cambia la forma en que se ve. Algunos codificadores prefieren display , pero a veces visibilidad también tiene sentido. Por ejemplo:

 .hidden {display: none; } 
.unhidden {display: block; }

Si desea utilizar la visibilidad, cambie estas clases a:

 .hidden {visibilidad: oculto; } 
.unhidden {visibilidad: visible; }

Agregue la clase oculta a su div para que comience como oculta en la página:


JavaScript para hacerlo funcionar

Todo lo que hace este script es mirar la clase actual establecida en su div y la cambia a oculta si está marcada como oculta o viceversa.

Esto es solo unas pocas líneas de JavaScript. Coloque lo siguiente en el encabezado de su documento HTML (antes de la etiqueta:

 
función mostrar (divID) {
var item = document.getElementById (divID);
if (item) {
item.className = (item.className == 'hidden')? 'unhidden': 'hidden';
}
}

Lo que hace este script, línea por línea:

  1. Llama a la función mostrar , y divID es la identificación única exacta que desea mostrar u ocultar.

  2. Configura una variable i tem con el valor de su div.

  3. Realiza una simple comprobación del navegador; si el navegador no admite getElementById , este script no funcionará.

  4. Comprueba la clase en el div. Si está oculto , lo cambia a no oculto . De lo contrario, lo cambia a oculto .

  5. Cierra la declaración if .

  6. Cierra la función.

Para que el script funcione, debe hacer una cosa más. Regrese a su enlace y agregue el javascript al atributo href. Asegúrese de usar la identificación única exacta que nombró su div en este href:

  Aprender HTML  

¡Felicidades! Ahora tiene un div que se mostrará y ocultará cada vez que haga clic en un enlace.

Posibles problemas a tener en cuenta

Este script no es infalible. Hay algunas situaciones en las que podría causarle problemas:

  1. JavaScript no está activado. Si sus lectores no tienen JavaScript o está desactivado, este script no funcionará. Los divs ocultos permanecen ocultos sin importar lo que hagan tus lectores.Una forma de solucionar esto es colocar los divs ocultos en un área de noscript, pero tendrás que jugar con eso para que se muestren correctamente.

  2. Demasiado contenido. Esta puede ser una gran herramienta para permitir que sus lectores vean solo el contenido que necesitan, pero si coloca demasiado dentro de los divs ocultos, puede afectar drásticamente la carga de la página. Recuerde que aunque el contenido no se muestre, el navegador web todavía lo está descargando, así que tenga sentido en la cantidad de contenido que oculta.

  3. Los clientes no entienden. Finalmente, los clientes pueden no estar acostumbrados a hacer clic en un enlace que muestra u oculta contenido. Juegue con iconos (además de signos y flechas que funcionan bien) o texto para explicar lo que sucederá con sus clientes. Otra solución es dejar uno de los divs abierto mientras los otros están cerrados. Esto puede transmitir la idea a sus clientes, para que puedan descubrir más rápidamente cómo abrir el contenido restante.

Siempre debe probar HTML dinámico como este con sus clientes. Una vez que se sienta seguro de que pueden entenderlo y usarlo, esta puede ser una excelente manera de obtener una gran cantidad de contenido en sus páginas web sin ocupar mucho espacio visible.

Rate article
labsfabs.com
Add a comment