| | display block, mostra o nasconde div o tabella javascript css | |
| |
 | | |
| max_400_css |
| | display blockmostra o nasconde div o tabella javascript cssesempio: HTML <html>
<head>
<style>
#div1 {
display: none;
}
#div2 {
display: none;
}
</style>
<script language="javascript">
function display_block() {
document.getElementById('div1').style.display = "block";
}
function hide_block() {
document.getElementById('div1').style.display = "none";
}
//--------------------------------------------------------------------
function display_block2() {
document.getElementById('div2').style.display = "block";
}
function hide_block2() {
document.getElementById('div2').style.display = "none";
}
</script>
</head>
<body>
<div align="center">
<table border=1 width=700>
<tr><td>
<div id="div1" style="width:100px; text-align:justify" align="center">
<font color=red><b>prima riga</b></font><br>
</div>
</td></tr>
<tr><td>seconda riga</td></tr>
<tr><td>terza riga</td></tr>
<tr><td>quarta riga</td></tr>
<tr><td>
<div align="center">
<a href="javascript:display_block();"><font color=green><b>Mostra Prima Riga</b></a></font> - <a href="javascript:hide_block();" style="color:red;">nascondi Prima Riga</a><br>
</div>
</td></tr>
<tr><td>
<div id="div2" style="width:100px; text-align:justify; cursor: url(zampa.cur), pointer;" align="center">CAPITOLO 2<br>
nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv
nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv
<br>
</div>
</td></tr>
<tr><td>
<div align="center" >
<a style="cursor: url(zampa.cur), pointer;" href="javascript:display_block2();">Mostra capitolo 2</a> - <a href="javascript:hide_block2();"><font color=red>nascondi DIV</font></a><br>
</div>
</td></tr>
</table>
</body>
</html> esempio CODICE http://max400scuola.altervista.org/aaa/asasa.html
| | | |
| |
|
| max_400_css |
| | un esempio più semplice forse migliore... esempio CODICE http://max400.netne.net/visualizza-nascondi-DIV.html e il codice tutto in una pagina (css interni + javascript) CODICE <style> #div1 { display: none; } </style> <script> function visualizza() { document.getElementById('div1').style.display = "block"; } function nascondi() { document.getElementById('div1').style.display = "none"; } </script> <div id="div1" style="width:100px; margin-left: 300px; text-align:justify; ">CAPITOLO 1<br> nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv <br> </div> <p style="margin-left: 300px;"> <input type="button" onclick="visualizza()" value="Visualizza"> - <input type="button" onclick="nascondi()" value="Nascondi"> </p><br> ============================= Se lo vogliamo continuare....  il link di esempio CODICE http://max400.netne.net/visualizza-nascondi-DIV2.html HTML <style>
#div1 {
display: none;
}
#div2 {
display: none;
}
</style>
<script>
function visualizza() {
document.getElementById('div1').style.display = "block";
}
function nascondi() {
document.getElementById('div1').style.display = "none";
}
//------------------------------------------------------------------------------
function visualizza2() {
document.getElementById('div2').style.display = "block";
}
function nascondi2() {
document.getElementById('div2').style.display = "none";
}
</script>
<div id="div1" style="width:100px; margin-left: 300px; text-align:justify; ">CAPITOLO 1<br>
nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv
nvmc
<br>
</div>
<p style="margin-left: 300px;">
<input type="button" onclick="visualizza()" value="Visualizza"> -
<input type="button" onclick="nascondi()" value="Nascondi">
</p><br>
<div id="div2" style="width:100px; margin-left: 300px; text-align:justify; ">CAPITOLO 2<br>
nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv nvmcn vmcnv mcn mcv
nvmcn
<br>
</div>
<p style="margin-left: 300px;">
<input type="button" onclick="visualizza2()" value="Visualizza"> -
<input type="button" onclick="nascondi2()" value="Nascondi">
</p><br>
| | | |
| |
|
| max_400_css |
| | ========================== in quest'altro esempio dovete scrivere
una parola per visualizzare quello che volete il link CODICE http://max400.netne.net/visualizza-nascondi-DIV-password.html HTML <style>
#div1 {
display: none;
}
</style>
<script>
function visualizza() {
document.getElementById('div1').style.display = "block";
}
function nascondi() {
document.getElementById('div1').style.display = "none";
}
function controlla(){
if(document.getElementById('casella').value=="banana"){
visualizza()
document.foto.src="http://us.123rf.com/400wm/400/400/dedmazay/dedmazay1009/dedmazay100900149/7905641-marrone-scimmia-con-una-banana.jpg";
}else if(document.getElementById('casella').value=="formaggio"){
visualizza()
document.foto.src="http://www.scuolamediabramante.it/classe2.0/wp-content/uploads/2009/11/topolino-favola-inventata-nel-tema1.jpg";
}else{
alert("errato");
}
}
</script>
Scrivi: banana - oppure: formaggio<br>
<input type="text" id="casella"><br>
<input type="button" onclick="controlla()" value="Controlla">
<div id="div1" style="width:100px; margin-left: 300px; text-align:justify; ">
<img name="foto" src=" " width=347 height=400>
</div>
<p style="margin-left: 300px;">
<input type="button" onclick="visualizza()" value="Visualizza"> -
<input type="button" onclick="nascondi()" value="Nascondi">
</p><br> | | | |
| |
|
| max_400_css |
| | ==================== oppure senza display ma con semplice radio il link HTML http://max400.netne.net/radio-scimmia-topo.html HTML <script>
function scimmia(){
document.foto.src="http://us.123rf.com/400wm/400/400/dedmazay/dedmazay1009/dedmazay100900149/7905641-marrone-scimmia-con-una-banana.jpg";
}
function sorcio(){
document.foto.src="http://www.scuolamediabramante.it/classe2.0/wp-content/uploads/2009/11/topolino-favola-inventata-nel-tema1.jpg";
}
function nessuno(){
document.foto.src=" ";
}
</script>
scimmia: <input type="radio" name="radio" onClick="scimmia()"><br>
sorcio: <input type="radio" name="radio" onClick="sorcio()"><br>
nessuno: <input type="radio" name="radio" onClick="nessuno()" checked><br>
<div align=center>
<img name="foto" src=" " width=347 height=400>
</div> | | | |
| |
|
| max_400_css |
| | ============= Checkbox una sola scelta HTML http://max400.netne.net/checkbox-una-sola-scelta-elefante-topo.html HTML <script>
function scimmia(){
document.foto.src="http://us.123rf.com/400wm/400/400/dedmazay/dedmazay1009/dedmazay100900149/7905641-marrone-scimmia-con-una-banana.jpg";
document.getElementById("check2").checked=false;
document.getElementById("check3").checked=false;
}
function sorcio(){
document.foto.src="http://www.scuolamediabramante.it/classe2.0/wp-content/uploads/2009/11/topolino-favola-inventata-nel-tema1.jpg";
document.getElementById("check1").checked=false;
document.getElementById("check3").checked=false;
}
function nessuno(){
document.foto.src=" ";
document.getElementById("check1").checked=false;
document.getElementById("check2").checked=false;
}
</script>
scimmia: <input type="checkbox" id="check1" onClick="scimmia()"><br>
sorcio: <input type="checkbox" id="check2" onClick="sorcio()"><br>
nessuno: <input type="checkbox" id="check3" onClick="nessuno()" checked><br>
<div align=center>
<img name="foto" src=" " width=347 height=400>
</div> | | | |
| |
|
| max_400 |
| | il display block/none è molto importante e molto usato per evitare confusione nella vostra pagina web e fare in modo di visualizzare solamente l'argomento che vi interessa.
Come ad esempio un sommario, un indice ove cliccando su una cspecifica voce compare nello spazio sottostante l'argomento scelto
| | | |
| |
|
| 6 replies since 26/9/2011, 02:11 500 views |
| |
| | |
