Tecnología

Inicio

Cómo ocultar varias Div en JavaScript

Cómo ocultar varias Div en JavaScript


Es posible que tenga páginas Web que contienen una gran cantidad de datos. Hacer un poco de su divs de las páginas web HTML, o divisiones definidas a nivel de bloque, plegables para mantener a sus usuarios del sitio de ser abrumado con datos. Crear una función de JavaScript para controlar la visualización de datos. Establecer la página de modo que el contenido div se oculta inicialmente cuando se carga la página.

Instrucciones

1 Abra el archivo HTML. Preceder a su divs con un encabezado que sus usuarios pueden hacer clic para mostrar y ocultar los datos relacionados.

2 Escriba su función de JavaScript dentro de los "<head>" etiquetas:

<Script>

función showHideDiv (id)

{

divElement = document.getElementById(id);

si (divElement.style.display == 'none') {

divElement.style.display = '';

} Else {

divElement.style.display = 'none';

}

falso retorno;

}

</ Script>

3 Tipo "clic" dentro de la etiqueta de encabezado div llamar a la función "showHideDiv":

<H2 onclick = "showHideDiv ( 'd1');"> Primera División por título </ h2>

<Div>

<P> En primer párrafo Div contenido. </ P>

</ Div>

4 Introduzca una ID dentro del elemento DIV para proporcionar acceso a la misma por la secuencia de comandos:

<H2 onclick = "showHideDiv ( 'd1');"> Primera División por título </ h2>

<Div id = estilo "D1" = "display: none">

<P> En primer párrafo Div contenido. </ P>

</ Div>

El parámetro "pantalla" se establece en ninguno para indicar que los datos de este Div o elemento no se muestra. Cuando se hace clic en el título, la secuencia de comandos establece que se muestre. Repita el proceso para cada Div en su página utilizando los identificadores únicos para cada uno.