February 26
Nascondere sezioni di una pagina Web o dettagli in titoli può aiutare a fornire un aspetto ordinato che rende una pagina più attraente, in particolare per le notizie e pagine di informazioni relative. codifica complesso è necessario per costruire il tipo di funzionalità in JavaScript che permette di mostrare o nascondere sottosezioni come e quando richiesto. Tuttavia, jQuery, una libreria di funzioni JavaScript, consente di realizzare il compito in modo semplice e generico.
1 Scarica la libreria jQuery jQuery-1.5.1min.js dal collegamento di download fornito nella sezione Riferimenti. Nella finestra di dialogo download, selezionare "Salva con nome ..." e salvare la libreria sul desktop.
2 Copia e incolla il seguente codice nel blocco note e salvarlo come hidediv.html sul desktop. Questo è costituito da quattro strati di div annidati con collegamenti per visualizzare o nascondere ogni div nidificato. Gli ID ID DIV e di collegamento, come "pecore", "sheep_1", ecc indicano il nome della sezione e il livello DIV nidificato.
<Html> <head>
<Script type = "text / javascript 'src =' jquery-1.5.1.min.js '> </ script>
</ Head> <body>
<Div id = 'pecore'> Baa Baa pecora nera, avete qualsiasi lana?
<a href='#a1' id='sheep' class='showOpt'> </a>
<Div id = 'sheep_1'> Sissignore, sissignore, tre sacchi pieni,
<a href='#a1' id='sheep_1' class='showOpt'> </a>
<Div id = 'sheep_2'> Uno per il mio padrone, uno per il mio dame,
<a href='#a1' id='sheep_2' class='showOpt'> </a>
<Div id = 'sheep_3'> E uno per il ragazzino che vive nella nostra corsia.
</ Div> </ div> </ div> </ div>
<Script>
</ Script> <body> </ html>
3 Copia e incolla il seguente "toggleDiv ()" funzione di JQuery, sopra la linea "</ script> </ body> </ html>", in modo che venga eseguito dopo tutti gli oggetti HTML sono stati caricati. Questa funzione JQuery prende il link ID show-o-nascondere, ad esempio "sheep_1," come parametro e si nasconde o mostra la successiva div nidificato a seconda se l'attributo "isShowing" è attualmente impostato su "sì" o "no". Si utilizza il metodo JQuery "fadeToggle ()" per passare tra i due stati. Le ultime tre linee di nascondere tutti i livelli, dal livello e al di sotto nipotino per garantire che solo il livello di bambino attualmente selezionata viene visualizzata sulla selezione.
jQuery.fn.toggleDiv = function (id) {
$ ( 'Div: [id = "' + id + '"]').. Bambini ( 'div') fadeToggle ( 'slow');
if (($ (.. 'div: [id = "' + id + '"]') i bambini ( 'div') attr ( 'isShowing')) == 'no') {
$('div:[id="'+id+'"]').children('div').attr('isShowing','yes');
. $ ( 'A: [id = "' + id + '"]') html ( '(nascondere ...)');
}altro {
$('div:[id="'+id+'"]').children('div').attr('isShowing','no');
$ ( 'A: [id = "' + id + '"]') html ( '(mostra ...)');.
}
$ ( 'Div: [id = "' + id + '"]') i bambini ( 'div') trovare ( 'a') html ( '(mostra ...)');...
$ ( 'Div: [id = "' + id + '"]') i bambini ( 'div') trovare ( 'div') nascondere ();...
$... ( 'Div: [id = "' + id + '"]') i bambini ( 'div') trovano ( 'div') attr ( 'isShowing', 'no');
}
4 Copiare e incollare la funzione click evento dopo la fine della funzione "jQuery.fn.toggleDiv". Ogni volta che un collegamento con classe "showOpt" viene cliccato, si chiama la funzione toggleDiv con l'ID corrente come parametro.
$ ( 'A: [class = "showOpt"]'). Click (function (e) {
$ () ToggleDiv (this.id).;
});
5 Copiare e incollare la seguente riga dopo la fine della funzione click-evento precedente. Quando la pagina viene caricata, tutti i div annidati vengono visualizzati per impostazione predefinita. Questa linea deve essere aggiunto, in modo che solo quando la pagina terminato il caricamento, tutti i div al di sotto del DIV "pecore" sono nascosti.
. $ () ToggleDiv ( 'pecore');
6 Salva hidediv.html e verificare la pagina cliccando su mostra e nascondi link.