June 11
Usando una combinazione di codice JavaScript e fogli di stile CSS, è possibile causare gli elementi di divisione nelle pagine Web per apparire e scomparire con l'interazione dell'utente. È possibile impostare inizialmente un elemento per essere nascosto in CSS, e quindi chiamare una funzione JavaScript su interazione dell'utente con un altro elemento nella tua pagina. Quando l'utente interagisce con questo secondo elemento, è possibile attivare o disattivare la visibilità dell'elemento principale, modificando il nome della classe. Il nome della classe determina le proprietà CSS che si applicano a un elemento HTML, ivi compresa la visibilità e visualizzare le proprietà.
1 Creare l'elemento div HTML che si desidera mostrare e nascondere. Aggiungere il seguente codice di esempio alla pagina:
<Div id = "content" class = "nascondere"> Ecco il contenuto </ div>
È possibile sostituire il contenuto dell'elemento con qualsiasi testo o altri dati che ti piace, ma assicuratevi di includere gli attributi id e class. Il codice JavaScript utilizzerà l'attributo ID per identificare e modificare l'elemento, mentre il nome della classe determinerà lo stile ad esso applicata in qualsiasi momento.
2 Aggiungere un elemento interattivo alla tua pagina. Per chiamare la funzione JavaScript su interazione dell'utente con la pagina, è necessario impostare un elemento con un listener di eventi. Aggiungere il seguente codice immediatamente prima l'elemento di contenuto che si sta progettando di mostrare e nascondere:
<Div onclick = "Toggle ( 'content')"> Ecco la voce - fare clic per visualizzare o nascondere il contenuto </ div>
È possibile sostituire il contenuto di questo div con qualsiasi testo che ti piace. Quando l'utente fa clic su questo div, causerà la funzione JavaScript per commutare la visibilità del elemento di contenuto. L'attributo "onclick" listener di eventi passa l'ID dell'elemento contenuto come parametro alla funzione JavaScript.
3 Aggiungere una sezione di stile alla tua pagina. Per implementare mostrando e nascondendo il vostro elemento, è necessario impostare le proprietà di visualizzazione. Aggiungere il seguente codice di stile per la sezione head della pagina HTML:
<Style type = "text / css">
.nascosto {display: none; }
.show {display: block; }
</ Style>
Questo codice specifica le proprietà di visualizzazione per quando l'elemento viene visualizzato o nascosto. Il codice CSS identifica l'elemento tramite il suo attributo nome della classe.
4 Aggiungere una funzione JavaScript alla vostra pagina. Inserire la seguente sezione script nella zona della testa HTML:
<Script type = "text / javascript">
var IsVisible = false;
levetta funzioni (voce) {
if (IsVisible) {
IsVisible = false;
document.getElementById (voce) .className = 'nascondere'; }
altro {
IsVisible = true;
document.getElementById (voce) .className = 'show'; }}
</ Script>
La funzione di commutazione utilizza una variabile per tenere traccia dello stato di visibilità corrente dell'elemento. Utilizzando il parametro di attributo elemento ID, il codice modifica il nome della classe div, alternando mostrare e nascondere. Il nome della classe farà sì che le proprietà di visualizzazione CSS per l'elemento di alternare quando questa funzione esegue.
5 Salvare il file HTML. Aprire la pagina in un browser Web. Si dovrebbe vedere il testo del titolo, ma non il contenuto quando si visualizza la pagina iniziale. Fare clic sul titolo per vedere l'effetto della funzione. Ogni volta che si fa clic l'intestazione div, il contenuto div dovrebbe o apparire o scomparire, alternando tra i due. L'intestazione div deve rimanere visibile in tutto.