Amosar e ocultar texto ou imaxes con CSS e JavaScript

Crea unha experiencia de estilo de aplicación nos teus sitios web

O HTML dinámico (DHTML) permítelle crear unha experiencia de estilo de aplicación nos seus sitios web, reducindo a frecuencia de que as páxinas completas están completamente cargadas. Nas aplicacións, cando fas clic en algo, a aplicación cambia inmediatamente para mostrar ese contido específico ou para fornecerche a túa resposta.

En cambio, as páxinas web teñen que ser recargadas, ou se debe cargar unha nova páxina. Isto pode facer que a experiencia do usuario sexa máis disxuntiva. Os teus clientes teñen que esperar a cargar a primeira páxina e agardar outra vez para cargar a segunda páxina, etc.

Usando & lt; div & gt; Mellorar a experiencia do espectador

Usando DHTML, unha das formas máis sinxelas de mellorar esta experiencia é que os elementos div se activan e desactiven para mostrar o contido cando se solicita. Un elemento div define divisións lóxicas na súa páxina web. Pense nunha div como unha caixa que pode conter parágrafos, títulos, ligazóns, imaxes e ata outros divs.

O que necesitas

Para crear unha div que se pode activar e desactivar, necesitará o seguinte:

A ligazón de control

A ligazón de control é a parte máis fácil. Simplemente cree unha ligazón como faría noutra páxina. De momento, deixe o atributo href en branco.

Aprende HTML

Colócao en calquera lugar da túa páxina web.

A div para mostrar e ocultar

Crea o elemento div que quere mostrar e ocultar. Asegúrese de que o seu div ten unha identificación única nel. No exemplo, o identificador único é aprender HTML .

Esta é a columna de contido. Comeza en branco salvo este texto de explicación. Elixe o que queres aprender na columna de navegación da esquerda. O texto aparecerá debaixo:

Saber HTML
  • Clase gratuíta HTML
  • Tutorial HTML
  • ¿Que é XHTML?

    O CSS para mostrar e ocultar a div

    Crea dúas clases para o teu CSS: un para ocultar o div e outro para mostralo. Ten dúas opcións para iso: visualización e visibilidade.

    A pantalla elimina o div do fluxo da páxina e a visibilidade só cambia como se ve. Algúns codificadores prefiren amosar , pero ás veces tamén ten sentido a visibilidade . Por exemplo:

    .hidden {amosar: ningún; } .unhidden {display: block; }

    Se queres usar a visibilidade, cambia estas clases a:

    .hidden {visibility: hidden; } .unhidden {visibility: visible; }

    Engade a clase oculta ao teu div para que comece como oculto na páxina:

    class = "hidden" >

    JavaScript para facelo funcionar

    Todo este script fai é mirar o conxunto de clase actual no seu div e cambialo para que se desactive se está marcado como oculto ou viceversa.

    Estas son só algunhas liñas de JavaScript. Sitúe o seguinte na cabeza do seu documento HTML (antes da etiqueta :