HTML dinamico (DHTML) ti consente di creare un'esperienza in stile applicazione sui tuoi siti Web, riducendo la frequenza con cui intere pagine devono essere caricate completamente. Nelle applicazioni, quando fai clic su qualcosa, l'applicazione cambia immediatamente per mostrare quel contenuto specifico o per fornirti la tua risposta.
Al contrario, le pagine Web in genere devono essere ricaricate o deve essere caricata una pagina completamente nuova. Questo può rendere l'esperienza dell'utente più sconnessa. I tuoi clienti devono attendere il caricamento della prima pagina e quindi attendere nuovamente il caricamento della seconda pagina e così via.
Utilizzo per migliorare l'esperienza dello spettatore
Utilizzando DHTML, uno dei modi più semplici per migliorare questa esperienza è avere div gli elementi si attivano e disattivano per visualizzare il contenuto quando richiesto. UN elemento div definisce le divisioni logiche sulla tua pagina web. Pensa a un div come a una casella che può contenere paragrafi, intestazioni, collegamenti, immagini e persino altri div.
Cosa ti servirà
Per creare un div che può essere attivato e disattivato, è necessario quanto segue:
- Un collegamento per controllare il div accendendolo e spegnendolo quando si fa clic.
- Il div da mostrare e nascondere.
- CSS per applicare uno stile al div nascosto o visibile.
- JavaScript per eseguire l'azione.
Il collegamento di controllo
Il collegamento di controllo è la parte più semplice. Crea semplicemente un collegamento come faresti per un'altra pagina. Per ora, lascia il attributo href vuoto.
Impara l'HTML
Posizionalo ovunque nella tua pagina web.
Il Div da mostrare e nascondere
Crea l'elemento div che vuoi mostrare e nascondere. Assicurati che il tuo div abbia un ID univoco. Nell'esempio, l'id univoco è impara l'HTML.
Questa è la colonna del contenuto. Inizia vuoto ad eccezione di questo testo di spiegazione. Scegli cosa vuoi imparare nella colonna di navigazione a sinistra. Il testo apparirà di seguito:
Impara l'HTML
- Classe HTML gratuita
- Tutorial HTML
- Che cos'è XHTML?
Il CSS per mostrare e nascondere il Div
Crea due classi per il tuo CSS: una per nascondere il div e l'altra per mostrarlo. Hai due opzioni per questo: visualizzazione e visibilità.
Display rimuove il div dal flusso della pagina e la visibilità cambia solo il modo in cui viene visualizzato. Alcuni programmatori preferiscono Schermo, ma a volte visibilità ha anche senso. Per esempio:
.hidden { display: none; }
.unhidden { display: block; }
Se desideri utilizzare la visibilità, modifica queste classi in:
.hidden { visibilità: nascosto; }
.unhidden { visibilità: visibile; }
Aggiungi la classe nascosta al tuo div in modo che inizi come nascosta nella pagina:
JavaScript per farlo funzionare
Tutto ciò che fa questo script è guardare la classe corrente impostata sul tuo div e attivarla per mostrarla se è contrassegnata come nascosta o viceversa.
Queste sono solo poche righe di JavaScript. Metti quanto segue nella testa del tuo Documento HTML (prima di.
Cosa fa questo script, riga per riga:
Richiama la funzione scopri, e divID è l'ID univoco esatto che vuoi mostrare o nascondere.
Imposta una variabile itema con il valore del tuo div.
Esegue un semplice controllo del browser; se il browser non supporta getElementById, questo script non funzionerà.
Controlla la classe sul div. Se è nascosto, lo cambia in non nascosto. Altrimenti, lo cambia in changes nascosto.
Chiude il Se dichiarazione.
Chiude la funzione.
Per far funzionare lo script, devi fare un'altra cosa. Torna al tuo link e aggiungi il javascript all'attributo href. Assicurati di utilizzare l'ID univoco esatto che hai chiamato il tuo div in questo href:
Impara l'HTML
Congratulazioni! Ora hai un div che verrà mostrato e nascosto ogni volta che fai clic su un collegamento.
Possibili problemi a cui prestare attenzione
Questo script non è infallibile. Ci sono alcune situazioni in cui potrebbe causare problemi per te:
JavaScript non attivato. Se i tuoi lettori non hanno JavaScript o è disattivato, questo script non funzionerà. I div nascosti rimangono nascosti indipendentemente da ciò che fanno i tuoi lettori. Un modo per risolvere questo problema è mettere i div nascosti in un'area noscript, ma dovrai giocarci un po' per farli visualizzare correttamente.
Troppi contenuti. Questo può essere un ottimo strumento per consentire ai tuoi lettori di vedere solo il contenuto di cui hanno bisogno, ma se metti troppo all'interno dei div nascosti, può influire drasticamente sul caricamento della pagina. Ricorda che anche se il contenuto non viene visualizzato, il browser Web lo sta ancora scaricando, quindi usa il buon senso in quanto contenuto nascondi.
I clienti non capiscono. Infine, i clienti potrebbero non essere abituati a fare clic su un collegamento che mostra o nasconde il contenuto. Gioca con le icone (segni più e le frecce funzionano bene) o il testo per spiegare cosa accadrà ai tuoi clienti. Un'altra soluzione è lasciare aperto uno dei div mentre gli altri sono chiusi. Questo può trasmettere l'idea ai tuoi clienti, in modo che possano capire più rapidamente come aprire il contenuto rimanente.
Dovresti sempre testare l'HTML dinamico in questo modo con i tuoi clienti. Una volta che ti senti sicuro che possono capirlo e usarlo, questo può essere un ottimo modo per ottenere una grande quantità di contenuti sulle tue pagine web senza occupare molto spazio visibile.