Estoy tratando de hacer unos menu con capas que se muestren o se oculten en base a un boton.
Según varias cosas que vi en este foro, me a quedado lo siguiente:
Head:
Código:
Body:<script>
var ocultmenucmg = "none";
var visibmenucmg = "inline";
var productos = "productos";
var clientes = "clientes";
//funciones para mostrar/ocultar elementos
function muestra(blo) {
document.getElementById(blo).style.display = visibmenucmg;
document.getElementById('mencmgoff').style.display = visibmenucmg;
document.getElementById('mencmgon').style.display = ocultmenucmg;
}
function oculta(blo) {
document.getElementById(blo).style.display = ocultmenucmg;
document.getElementById('mencmgoff').style.display = ocultmenucmg;
document.getElementById('mencmgon').style.display = visibmenucmg;
}
</script>
Código:
Mi problema es que no me funciona la segunda capa, o sea la de Clientes.<table align="center" border="0" width="900" cellpadding="0" cellspacing="0">
<tr>
<td width="100px">
<a id="mencmgon" href="javascript:muestra(productos)"><img src="img/productos_in.jpg" border="0"></a>
<a id="mencmgoff" style="display: none" href="javascript:oculta(productos)"><img src="img/productos_out.jpg" border="0"></a>
<div id="productos">
<div align="left" class="submenu">Alta</div>
<div align="left" class="submenu">Baja</div>
<div align="left" class="submenu">Modificación</div>
<div align="left"><img src="img/fin_submenu.gif"></div>
</div>
</td>
</tr>
<tr>
<td align="center" width="100px"><img src="img/sep_subMenu.gif"></td>
</tr>
<tr>
<td width="100px">
<a id="mencmgon" href="javascript:muestra(clientes)"><img src="img/clientes_in.jpg" border="0"></a>
<a id="mencmgoff" style="display: none" href="javascript:oculta(clientes)"><img src="img/clientes_out.jpg" border="0"></a>
<div id="clientes">
<div align="left" class="submenu">Listado</div>
<div align="left" class="submenu">Historial Compras</div>
<div align="left"><img src="img/fin_submenu.gif"></div>
</div>
</td>
</tr>
</table>
Bueno espero que me puedan dar una mano,
Muchas gracias como siempre.
