Capacità di JavaScript di modificare pagine Web in tempo reale rende possibile per gli sviluppatori di siti esplorare una serie di accattivanti effetti visivi sui loro siti Web. Pannelli, per esempio, sono gli elementi div HTML che visualizzano altri elementi quali testo e immagini. Con l'aggiunta di poche righe di JavaScript nel vostro documento HTML, si può dare ai visitatori del sito la possibilità di alternare pannelli multipli in una pagina Web quando vogliono.

Istruzioni

1

Avviare l'editor di HTML e aprire qualsiasi documento HTML. Aggiungere pannelli al documento incollando il seguente codice nella sezione body del documento:

< div id = "panelMaster" >
< / div >

< div id = "panel1" class = "hiddenPanel" >
Si tratta di pannello 1
< / div >

< div id = "panel2" class = "hiddenPanel" >
Si tratta di pannello 2
< / div >

< input type = "button" valore = "button" onclick="togglePanels()" / >

Questa prima istruzione div crea il primo pannello. Id di questo pannello è "panel1." Il pannello contiene una stringa di testo. La seconda istruzione crea un altro pannello cui id è "panel2." Entrambi i pannelli fanno riferimento a una classe CSS denominata "hiddenPanel." Che classe nasconde i pannelli inizialmente. Il div finale serve come un quadro master che Visualizza i due pannelli precedenti ogni volta che si sceglie il pulsante mostrato nell'ultima riga di codice.

2

Aggiungere la classe CSS al documento incollando il codice seguente nella sezione head del documento:

< style >
.hiddenPanel {display: none;}
< / stile >

3

Incollare il codice JavaScript riportato di seguito nella sezione script del documento:

pannelli di var = ["panel1", "panel2"];

var masterPanel = "panelMaster";
var panelCount = 0;

Function togglePanels() () {

var masterPanelObject = document.getElementById(masterPanel);

Se (panelCount > = panels.length)
panelCount = 0;

var panelObject = document.getElementById(panels[panelCount]);
masterPanelObject.innerHTML = panelObject.innerHTML;

panelCount + +;
}

La variabile di pannelli contiene i valori di id dei due pannelli. La variabile masterPanel contiene l'id del div masterPanel creato nella sezione corpo. La variabile panelCount - inizializzata a zero..--si comporta come un contatore. Ogni volta che si sceglie il pulsante, gli incrementi variabili da uno. La funzione JavaScript illustrata di seguito la variabile utilizza il valore di questa variabile per determinare se utilizzare il primo pannello o il secondo definito nella variabile di pannelli. Una volta che la funzione sa quale pannello per visualizzare, assegna proprietà innerHTML di tale variabile all'oggetto masterPanel.

4

Salvare il documento e visualizzarlo in un browser. Fare clic sul pulsante per alternare tra i due pannelli

Consigli & Avvertenze

• Questi pannelli di div contengono una stringa di testo semplice. Sostituire questo treno con qualcosa che ti piace ad esempio un'immagine o una forma anche. Quando gli utenti alternare tra i pannelli, vedranno gli elementi HTML che è stato assegnato a ognuno di questi pannelli.