Js, mostrare elemento con un click

Rendere interattive le pagine web o aggiungervi sofisticati effetti grafici
Apri un nuovo argomento Rispondi all’argomento
Autore Messaggio
 Oggetto del messaggio: Js, mostrare elemento con un click
MessaggioInviato: 06/07/2008, 22:13 
Avatar utente
Connesso

Amministratore

Iscritto il: 09/08/2007, 12:35
Messaggi: 1550
Località: Roma
Blog: View Blog (1)
Attraverso la combinazione di javascript e css si può ottenere un utile risultato di mostrare elementi all'interno di un div.
La funzione js è molto semplice, non farà altro che cambiare la dichiarazione display da none a block, del css degli elementi che inseriremo all'interno di una variabile dello script.

vediamo come fare nel dettaglio.

inseriamo questo script all'inteno dei tag della pagina in questione.

Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse


ho chiamato questa funzione toggle (alternare), quindi il div che dovrà contenere gli elementi da mostrare dovrà avere tale identificativo.

Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse


come vedete, all'interno di var option io ho inserito 12 oggetti, ma se ve ne servono di meno non c'è nessun problema, basta editare lo script secondo le proprie esigenze.

adesso andiamo a inserire i bottoni per nacondere/mostrare gli oggetti all'interno del div contenitore
avremo questo

Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse


come vedete ogni input richiama la funzione toggle per ogni oggetto contenuto nelle opzioni della variabile, 12 input per 12 oggetti.

continuiamo, inseriamo i div degli oggetti da mostrare/nascondere, anche in questo caso saranno 12
per cui avremo

Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse


adesso che abbiamo tutti gli elementi dobbiamo creare la situazione di partenza, ossia nascondere i div attraverso il css.

Codice: Seleziona tutto
I codici sono visibili solo agli utenti del forum, registrati e avrai pieno accesso alle nostre risorse


finito, potete vedere il risultato su questa pagina, chiaramente per ottenere il mio stesso risultato bisogna incrementare un pò il codice css e la grafica.

_________________
Immagine
Immagine

Cercasi volti nuovi per lo staff di Atlantide, fai la tua richiesta oggi stesso :mrgreen:


Profilo
 E-mail WWW  
 
 Pubblicità : Atlantide consiglia
Staff


Visualizza ultimi messaggi:  Ordina per  
Apri un nuovo argomento Rispondi all’argomento

Torna a Javascript

Chi c’è in linea

Visitano il forum: Nessuno e 0 ospiti

cron