HOola gente como va, bueno basicamente tengo esto.
4 Divs que se muestran y ocultan según yo selecciono la pestaña de cada una.
pero yo necesitaria que esten todos los links deshabilitados y no pueda seleccionar ninguna, solo cuando checkee los checkboox correspodiente a cada pestaña. se entiende? aca un codigo con el que estoy practicando...
Código HTML:
<html>
<head>
<title>Prueba</title>
<script>
function mostrar(nombreCapa){
document.getElementById(nombreCapa).style.display="block";
}
function mostrartodas(capa1,capa2,capa3){
document.getElementById(capa1).style.display="block";
document.getElementById(capa2).style.display="block";
document.getElementById(capa3).style.display="block";
}
function ocultar(nombreCapa){
document.getElementById(nombreCapa).style.display="none";
}
function ocultartodas(capa1,capa2,capa3,capa4){
document.getElementById(capa1).style.display="none";
document.getElementById(capa2).style.display="none";
document.getElementById(capa3).style.display="none";
document.getElementById(capa4).style.display="none";
}
</script>
<script>
function habilitar(res){
res.onClick="#";
}
function habilitar(acu){
acu.onClick="#";
}
function habilitar(int){
int.onClick="#";
}
function habilitar(ind){
ind.onClick="#";
}
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><p><a href="#" onClick="javascript:mostrartodas('capa1','capa2','capa3');">Ver todas las capas</a></p>
</td>
</tr>
</table>
<p>
<input name="box1" type="checkbox" onChange="javascript:habilitar(res); this.onclick = 'return false'">
Responsability
<br>
<input name="box2" type="checkbox" onChange="javascript:habilitar(acu); this.onclick = 'return false'" >
Accuracy <br>
<input name="box3" type="checkbox" onChange="javascript:habilitar(int); this.onclick = 'return false'">
Integrity
<br>
<input name="box4" type="checkbox" onChange="javascript:habilitar(ind); this.onclick = 'return false'">
Independence</p>
<div style="position:absolute; margin-top:80px; left: 29px; top: 107px; width: 79px; border:thin #000000" align="right"><a id="res" href="#" onClick="javascript:mostrar('capa1');ocultartodas('capa2','capa3','capa4');" >RESPONSABILTY</a></div>
<div style="position:absolute; margin-top:80px; left: 176px; top: 113px; width: 79px;" align="right"><a id="acu" href="#" onClick="javascript:mostrar('capa2');ocultartodas('capa1','capa3','capa4');">ACCURACY</a></div>
<div style="position:absolute; margin-top:80px; left: 275px; top: 113px; width: 79px;" align="right"><a id="int" href="#" onClick="javascript:mostrar('capa3');ocultartodas('capa1','capa2','capa4');">INTEGRITY</a></div>
<div style="position:absolute; margin-top:80px; left: 377px; top: 113px; width: 79px;" align="right"><a id="ind" href="#" onClick="javascript:mostrar('capa4');ocultartodas('capa1','capa2','capa3');">INDEPENDENCE</a></div>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p><br>
<br>
<br>
<br>
<br>
</p>
<p> </p>
<p> </p>
<p> </p>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td><a href="#" onClick="javascript:ocultartodas('capa1','capa2','capa3');">Cerrar todas las capas</a></td>
</tr>
</table>
<p> </p>
<div id="capa1" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 38px; top: 230px; z-index: 15; display:none" align="center" top-margin="100px">
<p> </p>
<p> </p>
<p align="center"> CAPA 1 </p>
</div>
<div id="capa2" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:414px; height:204px; position:absolute; left: 38px; top: 230px; z-index: 10; display:none" align="center" top-margin="100px">
<p> </p>
<p> </p>
<p align="center"> CAPA 2 </p>
</div>
<div id="capa3" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 5; display:none" align="center" top-margin="100px">
<p> </p>
<p> </p>
<p align="center"> CAPA 3 </p>
</div>
<div id="capa4" style="background-color:#CCCCCC; font-family:Verdana, Arial, Helvetica, sans-serif; color:#000000; width:413px; height:200px; position:absolute; left: 40px; top: 231px; z-index: 0; display:none" align="center" top-margin="100px">
<p> </p>
<p> </p>
<p align="center"> CAPA 4 </p>
</div>
</body>
</html> espero puedan ayudarme, gracias.