Hvordan veksle mellom paneler i HTML

Javascript evne til å endre websider i sanntid gjør det mulig for nettstedet utviklere å utforske en rekke engasjerende visuelle effekter på sine nettsider. Paneler, for eksempel, er HTML div-elementer som viser andre elementer som tekst og bilder. Ved å legge til noen få linjer med Javascript for å HTML-dokumentet, kan du gi besøkende muligheten til å veksle mellom flere paneler på en webside når de vil.

Bruksanvisning

1 Start din HTML-editor, og åpne alle HTML-dokument. Legg paneler til dokumentet ved å lime inn følgende kode inn i dokumentets hoveddel:

<Div id = "panelMaster">
</ Div>

<Div id = "malinger1" class = "hiddenPanel">
Dette er panel 1
</ Div>

<Div id = "Panel2" class = "hiddenPanel">
Dette er panel 2
</ Div>

<Input type = "button" value = "button" onclick = "togglePanels ()" />

Denne første div uttalelsen skaper din første panel. Dette panelet er id er "malinger1." Panelet inneholder en tekststreng. Den andre uttalelsen skaper et annet panel som har id er "Panel2." Begge panelene referere til en CSS-klasse som heter "hiddenPanel." Det klasse skjuler panelene i utgangspunktet. Den endelige div fungerer som en mester panel som viser de to foregående platene når du klikker på knappen som vises på siste linje med kode.

2 Legg CSS-klasse til dokumentet ved å lime inn følgende kode inn i dokumentet hode seksjon:

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

3 Lim inn Javascript-koden nedenfor inn i dokumentet manus seksjon:

Var paneler = [ "PANEL1", "Panel2"];

Var masterPanel = "panelMaster";
Var panelCount = 0;

funksjons togglePanels () {

Var masterPanelObject = document.getElementById (masterPanel);

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

Var panelObject = document.getElementById (paneler [panelCount]);
masterPanelObject.innerHTML = panelObject.innerHTML;

panelCount ++;
}

Panelene variabelen inneholder id verdiene av dine to paneler. Den masterPanel variabelen inneholder id av masterPanel div opprettet i kroppen delen. Den panelCount variable - initialisert til null - fungerer som en teller. Hver gang du klikker på knappen, variabel øker med én. Javascript-funksjonen vises under variable bruker denne variabelen verdi for å bestemme om du vil bruke det første panelet eller andre panel definert i paneler variabel. Når funksjonen vet hvilke panel som skal vises, det tildeler at variabelen innerhtml eiendom til masterPanel objektet.

4 Lagre dokumentet og vise den i en nettleser. Klikk på knappen for å veksle mellom de to panelene

Hint

• Disse div paneler inneholder en enkel tekststreng. Erstatt dette toget med noe du liker, for eksempel et bilde eller form. Når brukerne veksle mellom panelene, vil de se HTML-elementer du tilordnet hver av disse panelene.