October 6
Visualizzare e nascondere elementi HTML è utile per le pagine Web in cui è necessario fare spazio per includere un sacco di contenuti e di interazione. Nascondere un form di login, per esempio, può rimuovere alcuni dei disordine da una prima pagina. Il modo migliore per nascondere e mostrare un "div" è quello di utilizzare jQuery, una libreria JavaScript sviluppato per rendere più facile per aggiungere animazioni nelle pagine Web. Una volta installato il file jQuery per la pagina Web, è possibile creare un div e scrivere uno script per attivarlo e disattivare ogni volta che l'utente fa clic su qualche altra parte della pagina Web.
1 Controllare il codice della pagina Web per un tag "<script>" contenente l'URL del file di libreria jQuery. Se non si trova questo codice, aggiungere un commento dopo il "<title>" tag nella testa di pagina Web:
<Script type = "text / javascript">
Il codice di cui sopra si collega a una copia di jQuery Google host per l'uso gratuito. Non è necessario scaricare jQuery per incorporare il codice nelle pagine Web.
2 Creare un div nella pagina Web con l'aggiunta di un paio di "<div>" tag. Dare la coppia un nome ID significativo unico:
<Div id = "myDiv">
</ Div>
Aggiungere qualsiasi contenuto che si desidera visualizzare o nascondere tra le "<div>" tag.
3 Aggiungere un collegamento alla pagina Web che attiverà l'occultamento e la proiezione del div. Questo collegamento non ha bisogno di un URL, ma aggiungere un ID al tag "<a>" e dare il link del testo:
<a href="#" id="toggle"> Mostra / Nascondi Div </a>
4 Torna al tuo "<script>" tag e aggiungere un nuovo paio di "<script>" tag sotto l'ultima:
<Script type = "text / javascript">
</ Script>
5 Aggiungere il codice jQuery tra i "<script>" tag. Inizia con dire al browser di non caricare lo script fino a quando dopo aver terminato il caricamento tutto il codice HTML:
<Script type = "text / javascript">
$ (Document) .ready (function () {
});
</ Script>
6 Scrivere lo script dentro le parentesi graffe della funzione "documento pronto". Seleziona il tuo link in jQuery e avviare il "click ()" la funzione:
$ ( '# Toggle'). Clic (function () {
});
Si noti come selezionando il link in jQuery rispecchia selezione elemento HTML in CSS (Cascading Style Sheets) del codice. Gli sviluppatori di jQuery ha fatto di proposito, in modo da poter sempre sostituire "#toggle" con qualsiasi selettore CSS che vuoi.
7 Aggiungere il codice per attivare o disattivare la div quando l'utente fa clic sul collegamento. Questo codice va all'interno della funzione "click ()":
$ ( '# Toggle'). Clic (function () {
$ ( '# MyDiv') alternare ().;
});