Hola:
El código se ve algo viejo... ya no se consideran los "layers" que solo funciona en netscape 4...
puedes usar identificadores y estilos:
css:
#capa1 {
display: block;
}
#capa2, #capa3, #capa4 {
display: none;
}
javascript
:
var capas = ["capa1", "capa2", "capa3", "capa4"];
function mostrar(capa) {
// primero ocultamos todas...
for (var i = 0, total = capas.length; i < total; i ++)
document.getElementById(capas[i]).style.display = "none";
// y ahora mostramos la actual...
document.getElementById(capa).style.display = "block";
}
html:
<div id="capa1" >
contenido de capa
</div>
<div id="capa2" >
contenido de capa
</div>
<div id="capa3" >
contenido de capa
</div>
<div id="capa4" >
contenido de capa
</div>
selectores:
<button onclick="mostrar('capa1')"> mostrar capa 1 </button>
<button onclick="mostrar('capa2')"> mostrar capa 2 </button>
<button onclick="mostrar('capa3')"> mostrar capa 3 </button>
<button onclick="mostrar('capa4')"> mostrar capa 4 </button>
Como verás el ejemplo vale para una serie de capas... y la teoría se asemeja a los sistemas de pestañas.
En vez de activarlo con enlaces lo hice con botones, ya que tal como está tu ejemplo la página se recargaría siempre que se pulsa el enlace (en mi opinión una mala práctica)
Saludos
