Come nascondere e rivelare un Div

June 12

Usando un linguaggio solo Hypertext Markup Language (HTML) e fogli di stile a cascata (CSS), è possibile creare siti web complessi e belli. Quando si combinano JavaScript con queste due lingue, questo ti dà un sito web ancora più dinamico. Un modo semplice per aggiungere interattività al tuo sito è quello di creare una divisione (div) che è nascosto o rivelato dalla pressione di un tasto. Questo è utile per nascondere grandi quantità di testo, creare semplici giochi di memoria o per nascondere libro o un film spoiler.

istruzione

1 Aprire il software di editing HTML. Fai clic su "File" nella barra dei menu e scegliere "Nuovo" per creare un nuovo documento. Se desideri modificare un file HTML esistente, premere "File" e selezionare "Apri" per selezionare il file che si desidera.

2 Inserire il seguente codice JavaScript tra i tag <head> e </ head> tag del documento HTML:

<Script language = "JavaScript">

function toggle(id) {

var state = document.getElementById (id) .style.display;

if (state == 'none') {

document.getElementById (id) .style.display = 'blocco';

} altro {

document.getElementById (id) .style.display = 'none';

}

}

</ Script>

3 Individuare il <body> e </ body> tag del documento HTML. Tra questi tag, inserire il seguente codice ovunque vuoi che:

<Div> <a href="#" onclick="toggle('NAME'); tornare false;"> Mostra / Nascondi </a> </ div>

&lt;div id="NAME">

contenuto

& Lt; / div>

Sostituire "NAME" con un nome univoco per ogni divisione che desideri mostrare e nascondere. Posizionare il contenuto che si desideri nascondere tra i tag <div id = "NAME"> e </ div> tag. È anche possibile rinominare il link l'utente preme modificando il testo "Mostra / Nascondi". Salvare il documento al termine.