Ocultar secciones de una página web o detalles bajo titulares puede ayudar a proporcionar una apariencia ordenada que hace que una página más atractiva, especialmente para noticias o páginas relacionadas con la información. Se requiere codificación compleja para construir el tipo de funcionalidad en JavaScript que le permite mostrar u ocultar las secciones de como y cuando sea necesario. Sin embargo, JQuery, una biblioteca de funciones de JavaScript, permite llevar a cabo la tarea con facilidad y de forma genérica.
Instrucciones
1 Descargar la librería jQuery jQuery-1.5.1min.js desde el enlace de descarga proporcionada en la sección de Referencias. En el cuadro de diálogo de descarga, seleccione "Guardar como ..." y guardar la biblioteca en su escritorio.
2 Copia y pega el código siguiente en el Bloc de notas y guardarlo como hidediv.html en su escritorio. Este consta de cuatro capas de DIVs anidados con enlaces para mostrar u ocultar cada DIV anidados. Los identificadores ID DIV y de enlace tales como "ovejas", "sheep_1", etc. indican el nombre de sección y el nivel DIV anidados.
<Html> <head>
<Script type = "text / javascript" src = "jquery-1.5.1.min.js"> </ script>
</ Head> <body>
<Div id = 'ovejas'> Baa baa ovejas negro, tienes lana?
<a href='#a1' id='sheep' class='showOpt'> </a>
<Div id = "sheep_1 '> Sí señor, sí señor, tres bolsas llenas,
<a href='#a1' id='sheep_1' class='showOpt'> </a>
<Div id = "sheep_2 '> Uno para mi amo, uno para mi dama,
<a href='#a1' id='sheep_2' class='showOpt'> </a>
<Div id = "sheep_3 '> Y una para el niño que vive en nuestro carril.
</ Div> </ div> </ div> </ div>
<Script>
</ Script> <body> </ html>
3 Copiar y pegar el siguiente "toggleDiv ()" función de jQuery, por encima de la línea "</ script> </ body> </ html>", para que se ejecute después de que todos los objetos HTML se han cargado. Esta función jQuery toma el acoplamiento de la identificación de Show-o-ocultar, por ejemplo, "sheep_1," como parámetro y oculta o muestra la siguiente DIV anidada en función de si el atributo "isShowing" está configurado para "sí" o "no". Utiliza el método de jQuery "fadeToggle ()" para alternar entre los dos estados. Las últimas tres líneas de ocultar todos los niveles, desde el nivel nieto y abajo para asegurarse de que sólo el nivel de los niños actualmente seleccionado se visualiza en la selección.
jQuery.fn.toggleDiv = function (id) {
$ ( 'Div: [id = "' + ID + '"]').. Hijos ( 'div') fadeToggle ( "lento");
if (($ (.. 'div: [id = "' + ID + '"]') niños ( 'div') attr ( 'isShowing')) == 'no') {
$('div:[id="'+id+'"]').children('div').attr('isShowing','yes');
. $ ( 'A: [id = "' + ID + '"]') html ( '(ocultar ...)');
} Else {
$('div:[id="'+id+'"]').children('div').attr('isShowing','no');
$ ( 'A: [id = "' + ID + '"]') html ( '(mostrar ...).');
}
$ ( 'Div: [id = "' + ID + '"]') niños ( 'div') find ( 'a') html ( '(mostrar ...)');...
$ ( 'Div: [id = "' + ID + '"]') niños ( 'div') find ( 'div') hide ();...
$... ( 'Div: [id = "' + ID + '"]') niños ( 'div') se encuentran ( 'div') attr ( 'isShowing', 'no');
}
4 Copiar y pegar la función de eventos de clic después del final de la función "jQuery.fn.toggleDiv". Cada vez que se hace clic en un vínculo con la clase "showOpt", se llama a la función toggleDiv con el ID actual como parámetro.
$ ( 'A: [class = "showOpt"]'). Click en (function (e) {
$ () ToggleDiv (this.id).;
});
5 Copiar y pegar la siguiente línea después del final de la función de clic-caso anterior. Cuando se carga la página, todos los DIVs anidados se muestran por defecto. Esta línea debe agregarse, por lo que justo cuando la página termine de cargar, todos los DIVs por debajo de la DIV "ovejas" están ocultos.
. $ () ToggleDiv ( 'ovejas');
6 Guardar hidediv.html y probar la página haciendo clic en los enlaces Mostrar y ocultar.
Consejos y advertencias
- Para cambiar el efecto de animación de la mostrar y ocultar, puede utilizar "slideToggle ()" o "palanca ()" en lugar de "fadeToggle ()".