Utilizzando una combinazione di codice JavaScript e foglio di stile CSS, è possibile causare elementi di divisione in pagine Web di apparire e scomparire con l'interazione dell'utente. Si può inizialmente impostato per essere nascosto nel CSS dell'elemento e quindi chiamare una funzione JavaScript sull'interazione dell'utente con un altro elemento nella pagina. Quando l'utente interagisce con questo secondo elemento, è possibile alternare 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, tra cui la visibilità e visualizzare le proprietà.

Istruzioni

1

Creare l'elemento div HTML che si desidera mostrare e nascondere. Aggiungere il seguente codice di esempio alla tua pagina:

< div id = "contenuto" class = "Nascondi" > qui è il contenuto < / div >

È possibile sostituire il contenuto dell'elemento con qualsiasi testo o altri dati che ti piace, ma assicuratevi di che includere gli attributi class e ID. Il codice JavaScript verrà utilizzato l'attributo ID per identificare e modificare l'elemento, mentre il nome della classe determinerà lo stile applicato ad esso in qualsiasi momento.

2

Aggiungere un elemento interattivo alla tua pagina. Per chiamare la funzione JavaScript sull'interazione dell'utente con la pagina, è necessario impostare un elemento con un listener di eventi. Aggiungere il seguente codice immediatamente prima dell'elemento contenuto che hai intenzione di mostrare e nascondere:

< div onclick="toggle('content')" > Ecco l'intestazione - 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 questo div, causerà la funzione JavaScript alternare la visibilità dell'elemento del contenuto. L'attributo di listener di evento "onclick" passa l'ID dell'elemento del 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 la proprietà di visualizzazione. Aggiungere il seguente codice di stile per la sezione head della tua pagina HTML:

< style type = "text/css" >
nasconda {display: none;}
mostrassi {display: block;}
< / stile >

Questo codice consente di specificare le proprietà di visualizzazione per quando l'elemento viene visualizzato o nascosto. Il codice CSS identifica l'elemento utilizzando l'attributo di nome di classe.

4

Aggiungere una funzione JavaScript nella tua pagina. Inserire la seguente sezione di script nella vostra zona di testa di HTML:

< script type = "text/javascript" >
isVisible var = false;
Function toggle(item) () {
if(IsVisible) () {
isVisible = false;
Document. getElementById (voce) nomedellaclasse = 'Nascondi'; }
else {
isVisible = true;
Document. getElementById (voce) nomedellaclasse = 'Mostra'; }}
< / script >

La funzione attiva/disattiva utilizza una variabile per tenere traccia dello stato di visibilità corrente dell'elemento. Utilizzando il parametro di attributo ID di elemento, il codice modifica il nome della classe div, alternando tra show e hide. Il nome della classe causerà le proprietà di visualizzazione CSS per l'elemento di alternare quando questa funzione viene eseguita.

5

Salvare il file HTML. Aprire la pagina in un browser Web. Quando si visualizza inizialmente la pagina, si dovrebbe vedere il testo del titolo ma non il contenuto. Fare clic sull'intestazione per vedere l'effetto della vostra funzione. Ogni volta che si sceglie la voce div, div contenuto dovrebbe o appaiono o scompaiono, alternando tra i due. Il div dell'intestazione deve rimanere visibile in tutto.

Consigli & Avvertenze

• Utilizzo di librerie JavaScript come jQuery, è possibile aggiungere effetti animati quando si visualizzare e nascondono elementi.
• Assicurarsi che è chiaro agli utenti come accedere ai tuoi contenuti nascosti o possono mancare esso.