La capacità di JavaScript di modificare le pagine Web in tempo reale rende possibile per gli sviluppatori del sito per esplorare una varietà di effetti visivi che sui loro siti web. Pannelli, per esempio, sono HTML div elementi che visualizzano altri elementi come testo e immagini. Con l'aggiunta di poche righe di JavaScript al tuo documento HTML, è possibile dare ai visitatori del sito la possibilità di scegliere tra più pannelli in una pagina Web quando vogliono.

istruzione

1 Avviare il editor HTML, e aprire qualsiasi documento HTML. Aggiungere i 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 = valore "tasto" = "button" onclick = "togglePanels ()" />

Questa prima dichiarazione div crea il tuo primo pannello. id di questo pannello è "panel1." Il pannello contiene una stringa di testo. La seconda istruzione crea un altro pannello il cui ID è "Panel2." Entrambi i pannelli riferimento una classe CSS chiamato "hiddenPanel." Quella classe nasconde i pannelli inizialmente. Il div finale serve come un quadro master che visualizza le precedenti due pannelli ogni volta che si fa clic sul pulsante mostrato l'ultima riga di codice.

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

<Style>
.hiddenPanel {display: none;}
</ Style>

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

Pannelli var = [ "Panel1", "Panel2"];

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

togglePanels function () {

var masterPanelObject = document.getElementById (masterPanel);

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

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

panelCount ++;
}

La variabile pannelli contiene i valori ID della tua due pannelli. La variabile masterPanel contiene l'ID dei masterPanel div creati nella sezione corpo. La variabile panelCount - inizializzato a zero - agisce come un contatore. Ogni volta che si fa clic sul pulsante, gli incrementi variabili di uno. La funzione JavaScript mostrato sotto la variabile utilizza il valore di questa variabile per determinare se utilizzare il primo pannello o il secondo pannello definito nella variabile pannelli. Una volta che la funzione sa quale pannello per visualizzare, assegna proprietà innerHTML di quella variabile per l'oggetto masterPanel.

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

Consigli e avvertenze

• Questi pannelli div contengono una stringa di testo semplice. Sostituire questo treno con tutto quello che vuoi, come un'immagine o anche modulo. Quando gli utenti commutare tra i pannelli, vedranno gli elementi HTML che si assegnati a ciascuno di questi pannelli.