Spesso è utile visualizzare del testo statico on demand su pagina Web, il classico esempio è quello della visualizzazione di informazioni cliccando su un pulsante e poi farlo scomparire di nuovo ricliccando.
Il metodo Javascript è il seguente:
function showhide(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
document.getElementById('spiega').value="Mostra Guida";
} else {
document.getElementById(id).style.display = 'block';
document.getElementById('spiega').value="Nascondi Guida";
}
}
Al caricamento vogliamo che non si veda il testo del div, quindi definiamo
<style type="text/css">
<!--
#spiegazioni {
display: none;
}
-->
</style>
Sulla pagina HTML abbiamo
<form name="caricaBilancio" id="caricaBilancio" ENCTYPE="multipart/form-data" action="CaricaBilancio" method="post">
<input class="inputButton" id="spiega" type="button" name="Guida" title="Guida" value="Mostra guida" onclick="javascript:showhide('spiegazioni')"/>
<div id="spiegazioni">
/// qui il nostro testo
Prova prova
</div>
Vediamo l'esempio cliccando sul pulsante
Il metodo Javascript è il seguente:
function showhide(id) {
var state = document.getElementById(id).style.display;
if (state == 'block') {
document.getElementById(id).style.display = 'none';
document.getElementById('spiega').value="Mostra Guida";
} else {
document.getElementById(id).style.display = 'block';
document.getElementById('spiega').value="Nascondi Guida";
}
}
Al caricamento vogliamo che non si veda il testo del div, quindi definiamo
<style type="text/css">
<!--
#spiegazioni {
display: none;
}
-->
</style>
Sulla pagina HTML abbiamo
<form name="caricaBilancio" id="caricaBilancio" ENCTYPE="multipart/form-data" action="CaricaBilancio" method="post">
<input class="inputButton" id="spiega" type="button" name="Guida" title="Guida" value="Mostra guida" onclick="javascript:showhide('spiegazioni')"/>
<div id="spiegazioni">
/// qui il nostro testo
Prova prova
</div>
Vediamo l'esempio cliccando sul pulsante
Nessun commento:
Posta un commento