JavaScript, ecco come mostrare o nascondere un DIV
Vediamo oggi, con un semplice esempio, come mostrare o nascondere un DIV in una pagina HTML.
Creiamo un DIV e chiamiamolo “content” digitando poi un testo al suo interno:
<div id=”content”>
Questo è il div da mostrare o nascondere
</div>
All’interno della pagina HTML posizioniamo due pulsanti che, rispettivamente, mostreranno o nasconderanno il DIV richiamando un’opportuna funzione JavaScript:
<input type=”button” value=”Mostra” onclick=”javascript:mostra()” />
<input type=”button” value=”Nascondi” onclick=”javascript:nascondi()” />
Le due funzioni JavaScript (mostra / nascondi), agendo sulla proprietà display del DIV, ci permetteranno di mostrare il div (block) o di nasconderlo (none).
Ecco le funzioni JavaScript che fanno uso del DOM (getElementById) per manipolare il DIV:
function mostra() {
document.getElementById(“content”).style.display=”block”;
}
function nascondi() {
document.getElementById(“content”).style.display=”none”;
}
Scarica il file di esempio
|
download: Mostra-nascondi-div (634B) added: 22/10/2008 clicks: 2822 description: File di esempio su come mostrare o nascondere un div in una pagina HTML. |
Invia questo articolo a un amico via email
Per semplicità basterebbe usare una sola funzione
mostra(), se usi:// @param v true visibile, false invisibile
function mostra(v) {
document.getElementById(”content”).style.display=v?”block”:none;
}
Giusta osservazione!
Se non sbaglio i doppi apici vanno anche sul parametro “none”.
Grazie per la tua puntuale osservazione
Come è possibile disabilitare al caricamento della pagina un div? Quale funzione inserire?
@pippo per “nascondere” un div al caricamento della pagina puoi utilizzare la funzione nascondi() in questo modo:
window.onload = function() {
nascondi();
}
Essendo un fan di jQuery ti consiglio, comunque, di utilizzare le funzioni ready e hide del noto framework js per il tuo scopo
Esempio:
$(document).ready(function() {
$(‘#tuo_div’).hide();
});