Mostrare e nascondere gli elementi HTML è utile per le pagine Web dove dovete fare spazio per includere un sacco di contenuti e di interazione. Nascondere un form di login, ad esempio, possibile rimuovere alcuni del disordine da una prima pagina. Il modo migliore per nascondere e mostrare un "div" consiste nell'utilizzare jQuery, una libreria JavaScript sviluppata per rendere più facile per aggiungere le animazioni nelle pagine Web. Una volta che si installa il file jQuery alla tua pagina Web, è possibile creare un div e scrivere uno script per attivarlo su e fuori ogni volta che l'utente fa clic su qualche altra parte della pagina Web.

Istruzioni

Preparare il vostro codice HTML

1

Controllare il codice della tua pagina Web per un tag "< script >" contenente l'URL per il file della libreria jQuery. Se non trovate questo codice, aggiungere dopo il tag "< title >" nella testa della tua pagina Web:

< script type = "text/javascript" >

Link codice sopra a una copia di jQuery Google host ad uso gratuito. Non è necessario scaricare jQuery per incorporare tale codice nelle tue pagine Web.

2

Creare un div nella pagina Web con l'aggiunta di una coppia di tag "< div >". Dare la coppia un nome univoco e significativo di ID:

< div id = "mydiv" >

< / div >

Aggiungere qualsiasi contenuto che si desidera visualizzare o nascondere tra i tag "< div >".

3

Aggiungere un link alla tua pagina Web che attiverà la clandestinità e visualizzando del div. Questo link non hanno bisogno di un URL, ma aggiungere un ID per il tag "< a >" e dare il link del testo:

< a href = "#" id = "toggle" > Mostra/Nascondi il Div < /a >

4

Torna alla tua tag "< script >" e aggiungere una nuova coppia di tag "< script >" sotto l'ultimo:

< script type = "text/javascript" >

< / script >

Scrivere il vostro Script jQuery

5

Aggiungere codice jQuery tra i tag "< script >". Iniziare con dicendo il browser per non caricare lo script fino a dopo che ha terminato di caricare tutto il codice HTML:

< script type = "text/javascript" >

Web {

});

< / script >

6

Scrivere lo script all'interno delle parentesi graffe della funzione "documento pronto". Seleziona il tuo link in jQuery e avviare la funzione "click ()":

$('#toggle').click(function() () {

});

Notare come selezionando il link in jQuery specchi selezione dell'elemento HTML nel codice CSS (Cascading Style Sheets). Gli sviluppatori di jQuery questo fatto apposta, così è sempre possibile sostituire "#toggle" con qualsiasi selettore CSS che si desidera.

7

Aggiungere codice per attivare o disattivare il div quando l'utente fa clic sul link. Questo codice va all'interno della funzione "click ()":

$('#toggle').click(function() () {

$('#mydiv').toggle();

});

Consigli & Avvertenze

• Sostituire "toggle()" con "slideToggle()" per rendere la diapositiva di div su e giù.
• Modificare "toggle()" "toggle('slow')" per rallentare la velocità dell'animazione toggling.