Slik skjuler en DIV Toggle i Javascript

Hiding websideelementer er en måte å legge til interessante spesialeffekter til ditt nettsted. For eksempel ved å plassere et bilde inne i en DIV element, kan du lage en knapp som veksler bildet synlighet. En DIV er en spesiell HTML element som består av en åpning DIV tag og en avsluttende DIV tag. Alt mellom disse kodene blir en del av DIV blokken. Ved å bruke Javascript for å veksle en DIV synlighet, du også veksle synligheten av alle elementer i en DIV blokk.

Bruksanvisning

1 Åpne Notisblokk og lim inn følgende HTML-kode i et nytt dokument:

<Html xmlns = "http://www.w3.org/1999/xhtml">

<Head>

<Title> Div Test </ title>

</ Head>

<Body>

<Div id = "div1">

Inside div1

</ Div>

<Input id = "Button1" type = "button" value = "Klikk for å veksle synlighet" onclick = "return ToggleDiv ()" />

</ Body>

</ Html>

De tre første linjene med kode etter den innledende <body> opprette en DIV blokk. Dens ID er div1. Javascript-kode kan identifisere denne DIV blokken ved å referere til som ID. Legg merke til at teksten "Inside div1" vises mellom DIV blokkens åpning og lukking koder. Linjen med kode etter DIV blokken skaper en knapp du kan bruke til å teste vippefunksjon. Når klikket, kaller knappen en Javascript-funksjon kalt ToggleDIV. Det Funksjonen viser eller skjuler DIV.

2 Legg til følgende Javascript-kode etter tittel delen av HTML-dokumentet:

<Script language = "javascript" type = "text / javascript">

Var visibilityState = "synlig";

fungere ToggleDIV () {

Var divBlock = document.getElementById ( "div1");

if (visibilityState == "synlig")

visibilityState = "skjult";

ellers

visibilityState = "synlig";

divBlock.style.visibility = visibilityState;

}

</ Script>

Denne Javascript-funksjonen kjøres når brukere klikker på knappen som er beskrevet i forrige trinn. Hver gang funksjonen utfører, verdien av "visibilityState" veksle mellom "synlig" og "skjult". Funksjonen setter DIV synlighet eiendom til lagret i verdi "visibilityState."

3 Lagre HTML-dokumentet og åpne den i nettleseren din. Ordene "Inside div1" vises over "Klikk for å veksle synlighet" -knappen.

4 Klikk på knappen. Javascript-funksjonen går og skjuler DIV inneholder teksten. Klikk på knappen igjen for å gjøre DIV og dens tekst synlig. Teksten vises og forsvinner når du fortsetter å klikke på bryteren.

Hint

  • Merk at DIV ID er div1. Den første linjen i Javascript-funksjonen refererer også div1. Endre div1 til en verdi du vil. Hvis du endrer denne verdien, må du endre det på alle steder som det vises i HTML-dokumentet.
  • I dette eksemplet inneholder DIV en enkel tekststreng. Du kan plassere andre HTML-elementer, for eksempel knapper, bilder og former, inne i en DIV blokk. Alle elementer innen DIV vises og skjules når brukere klikker på bryteren.