Hola, tengo un problema para mostrar y ocultar las capas. Tengo 4 capas, al hacer clic en alguna quiero que la que se estaba mostrando se oculte, y así sucesivamente.
Dejo el código:
Código HTML:
<html>
<head>
<style>
#bloque1, #bloque2, #bloque3, #bloque4 {position: absolute; top: 20px; left: 0px;}
</style>
<script type="text/javascript">
OCULTO="none";
VISIBLE="block";
function mostrar(blo) {
document.getElementById(blo).style.display=VISIBLE;
}
function ocultar(blo) {
document.getElementById(blo).style.display=OCULTO;
}
</script>
</head>
<body>
<a href="#" onclic="ocultar('bloque2', 'bloque3', 'bloque4');mostrar('bloque1'); return false">Menu 1</a> |
<a href="#" onclic="ocultar('bloque1', 'bloque3', 'bloque4');mostrar('bloque2'); return false">Menu 2</a> |
<a href="#" onclic="ocultar('bloque1', 'bloque2', 'bloque4');mostrar('bloque3'); return false">Menu 3</a> |
<a href="#" onclic="ocultar('bloque1', 'bloque2', 'bloque3');mostrar('bloque4'); return false">Menu 4</a> |
<div id="bloque1" style="display: none;">
<a href="">Submenu 1.1</a> | <a href="">Submenu 1.2</a>
</div>
<div id="bloque2" style="display: none;">
<a href="">Submenu 2.1</a> | <a href="">Submenu 2.2</a>
</div>
<div id="bloque3" style="display: none;">
<a href="">Submenu 3.1</a> | <a href="">Submenu 3.2</a>
</div>
<div id="bloque4" style="display: none;">
<a href="">Submenu 4.1</a> | <a href="">Submenu 4.2</a>
</div>
</body>
</html> Y un link dpnde pueden ver el resultado de ese código:
http://hgp147.110mb.com/147.php
Muchas gracias!