Come nascondere un Toggle DIV in JavaScript / Myclads.com

Come nascondere un Toggle DIV in JavaScript

February 22

Nascondere elementi della pagina web è un modo per aggiungere effetti speciali interessanti al tuo sito web. Ad esempio, inserendo un'immagine all'interno di un elemento DIV, è possibile creare un pulsante che attiva la visibilità dell'immagine. Un DIV è un elemento HTML speciale che consiste in un tag di apertura DIV e un tag di chiusura DIV. Tutto ciò tra questi tag entra a far parte del blocco DIV. Utilizzando JavaScript per attivare o disattivare la visibilità di un DIV, si alterna anche la visibilità di tutti gli elementi in un blocco DIV.

istruzione

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

<Head>

</ Head>

<Body>

div1 interni

</ Div>

</ Body>

</ Html>

Le prime tre righe di codice dopo il tag iniziale <body> creano un blocco DIV. Il suo ID è div1. codice JavaScript in grado di identificare questo blocco DIV facendo riferimento che ID. Si noti che il testo "Inside div1" appare tra i tag di apertura e chiusura del blocco DIV. La riga di codice dopo il blocco DIV crea un pulsante è possibile utilizzare per verificare la funzione di commutazione. Quando si fa clic, il pulsante chiama una funzione JavaScript denominato ToggleDIV. Tale funzione mostra o nasconde la DIV.

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

var visibilityState = "visible";

funzione ToggleDIV () {

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

if (visibilityState == "visibile")

visibilityState = "hidden";

altro

visibilityState = "visible";

divBlock.style.visibility = visibilityState;

}

</ Script>

Questa funzione JavaScript viene eseguito quando gli utenti fanno clic sul pulsante descritto nel passaggio precedente. Ogni volta che la funzione viene eseguita, il valore di "visibilityState" alterna tra "visibile" e "nascosto". La funzione imposta proprietà di visibilità del DIV al valore memorizzato in "visibilityState."

3 Salvare il documento HTML e aprirlo nel browser. Le parole "All'interno div1" appaiono sopra il pulsante "Fare clic per scegliere Visibilità".

4 Fare clic sul pulsante. La funzione JavaScript corre e nasconde la DIV contenente il testo. Fare di nuovo clic sul pulsante per fare il DIV e il suo testo visibile. Il testo appare e scompare come si continua a fare clic sul pulsante di commutazione.

Consigli e avvertenze

Si noti che l'ID del DIV è div1. La prima riga della funzione JavaScript fa riferimento anche div1. Cambiare div1 a qualsiasi valore che ti piace. Se si modifica questo valore, assicurarsi di cambiarlo in tutti i luoghi che appare nel documento HTML.
In questo esempio, il DIV contiene una stringa di testo semplice. È possibile inserire altri elementi HTML, come i pulsanti, immagini e forme, all'interno di un blocco DIV. Tutti gli elementi all'interno del DIV appaiono e scompaiono come gli utenti fanno clic sul pulsante di commutazione.