Nascondere gli elementi della pagina Web è un modo per aggiungere effetti speciali interessanti al tuo sito Web. Per esempio, inserendo un'immagine all'interno di un elemento DIV, è possibile creare un pulsante che attiva/disattiva visibilità dell'immagine. Un DIV è un elemento HTML speciale che consiste in un DIV tag di apertura e una chiusura tag DIV. Fra quei tag diventa parte del blocco DIV. Usando JavaScript per alternare la visibilità di un DIV, si anche attivare o disattivare la visibilità di tutti gli elementi in un blocco DIV.

Istruzioni

1

Aprire il blocco note e incollare il seguente codice HTML in un nuovo documento:

< html xmlns = "l'http://www.w3.org/1999/xhtml" >

< head >

< title > Div Test < / title >

< / head >

< corpo >

< div id = "div1" >

Div1 interno

< / div >

< id di input = "Button1" type = "button" value = "Clicca per alternare la visibilità" onclick = "return ToggleDiv()" / >

< / body >

< / html >

Le prime tre righe di codice dopo il tag iniziale < corpo > creano un blocco DIV. L'ID è div1. Codice JavaScript può identificare questo blocco DIV facendo riferimento a tale ID. Si noti che viene visualizzato il testo "Inside div1" tra apertura e il tag di chiusura del blocco DIV. La riga di codice dopo il blocco DIV crea un pulsante è possibile utilizzare per testare la funzione attiva/disattiva. Quando viene selezionato, il pulsante chiama una funzione JavaScript denominata ToggleDIV. Tale funzione Mostra o nasconde il DIV.

2

Aggiungere il seguente codice JavaScript dopo la sezione del titolo del documento HTML:

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

var visibilityState = "visibile";

Function ToggleDIV() () {

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

Se (visibilityState = = "visibile")

visibilityState = "hidden";

altro

visibilityState = "visibile";

divBlock.style.visibility = visibilityState;

}

< / script >

Questa funzione JavaScript viene eseguito quando l'utente seleziona il pulsante descritto nel passaggio precedente. Ogni volta che la funzione viene eseguita, il valore di "visibilityState" alternativamente "visibile" e "nascosti". La funzione imposta la proprietà visibility di DIV al valore memorizzato in "visibilityState."

3

Salvare il documento HTML e aprirlo nel browser. Vengono visualizzate le parole "all'interno di div1" sopra il pulsante "Clicca per Toggle visibilità".

4

Fare clic sul pulsante. La funzione JavaScript viene eseguito e nasconde il DIV che contiene il testo. Fare clic sul pulsante nuovo per rendere visibile il DIV e il relativo testo. Il testo appare e scomparirà come si continua a fare clic sul pulsante attiva/disattiva.

Consigli & Avvertenze

• Notare che l'ID del DIV è div1. La prima riga nella funzione JavaScript fa inoltre riferimento div1. Modificare div1 su qualsiasi valore che ti piace. Se si modifica tale valore, assicuratevi di cambiare in tutti i posti che appare nel documento HTML.
• In questo esempio, il tag DIV contiene una stringa di testo semplice. È possibile inserire altri elementi HTML, quali pulsanti, immagini e forme, all'interno di un blocco DIV. Tutti gli elementi all'interno del DIV appaiono e scompaiono come utenti fare clic sul pulsante attiva/disattiva.