La capacidad de JavaScript para alterar las páginas Web en tiempo real, hace posible que los desarrolladores de sitios para explorar una variedad de efectos visuales sorprendentes en sus sitios web. Paneles, por ejemplo, son elementos HTML div que muestran otros elementos, como texto e imágenes. Mediante la adición de unas pocas líneas de JavaScript para su documento HTML, se puede dar a los visitantes del sitio la posibilidad de alternar entre varios paneles en una página Web siempre que lo deseen.
Instrucciones
1 Lanzar su editor de HTML, y abrir cualquier documento HTML. Añadir paneles al documento pegando el siguiente código en la sección del cuerpo del documento:
<Div id = "panelMaster">
</ Div>
<Div id = clase "panel1" = "hiddenPanel">
Este es el panel 1
</ Div>
<Div id = clase "panel2" = "hiddenPanel">
Este es el panel 2
</ Div>
<Input type = "button" value = "button" onclick = "togglePanels ()" />
Esta primera declaración div crea el primer panel. Identificación de este panel es "panel1." El panel contiene una cadena de texto. La segunda sentencia crea otro panel cuyo ID es "panel2." Referencia ambos paneles de una clase CSS llamada "hiddenPanel." Esa clase oculta los paneles inicialmente. El div última sirve como panel principal que muestra las dos anteriores grupos cada vez que hace clic en el botón que aparece en la última línea de código.
2 Agregue la clase CSS al documento pegando el siguiente código en la sección de la cabeza del documento:
<Style>
.hiddenPanel {display: none;}
</ Style>
3 Pegar el código JavaScript se muestra a continuación en la sección de escritura del documento:
Paneles var = [ "PANEL1", "panel2"];
var masterPanel = "panelMaster";
var panelCount = 0;
togglePanels function () {
var masterPanelObject = document.getElementById (masterPanel);
si (panelCount> = panels.length)
panelCount = 0;
var panelObject = document.getElementById (paneles [panelCount]);
masterPanelObject.innerHTML = panelObject.innerHTML;
panelCount ++;
}
La variable de paneles contiene los valores de ID de sus dos paneles. La variable masterPanel contiene el ID del div masterPanel creados en la sección del cuerpo. La variable panelCount - inicializado a cero - actúa como un contador. Cada vez que se pulsa el botón, los incrementos variables por uno. La función de JavaScript se muestra a continuación utiliza la variable el valor de esta variable para determinar si se debe utilizar el primer panel o el segundo panel se define en la variable de paneles. Una vez que la función sabe qué panel para visualizar, asigna innerHtml la propiedad de esa variable para el objeto masterPanel.
4 Guarde el documento y verlo en un navegador. Haga clic en el botón para cambiar entre los dos paneles
Consejos y advertencias
- Estos paneles div contienen una cadena de texto simple. Reemplazar este tren con cualquier cosa que usted tiene gusto, como una imagen o incluso la forma. Cuando los usuarios alternar entre los paneles, verán los elementos HTML que ha asignado a cada uno de esos paneles.