Hola. Soy nuevo en javascript pero esto que pides lo estuve probando estos días. Puede que no sea un ejemplo muy ortodoxo pero a mi me funciona. Prueba lo siguiente:
Código:
<html>
<head>
<title>Untitled Page</title>
</head>
<script language="javascript" type="text/javascript">
function mostrarCapa(Capa){
document.getElementById('Capa1').style.display='none';
document.getElementById('Capa2').style.display='none';
document.getElementById('Capa3').style.display='none';
document.getElementById('Capa4').style.display='none';
document.getElementById('Capa5').style.display='none';
document.getElementById(Capa).style.display='block';
}
</script>
<body>
<div style="float: left; width:150px;">
<h1>Menu</h1><br />
<a href="javascript:mostrarCapa('Capa1')">Pagina 1</a><br />
<a href="javascript:mostrarCapa('Capa2')">Pagina 2</a><br />
<a href="javascript:mostrarCapa('Capa3')">Pagina 3</a><br />
<a href="javascript:mostrarCapa('Capa4')">Pagina 4</a><br />
<a href="javascript:mostrarCapa('Capa5')">Pagina 5</a><br />
</div>
<div style="float:left;">
<div id="Capa1" style="background-color: Red; display: none; width: 500px; height: 500px;">Página 1</div>
<div id="Capa2" style="background-color: blue; display: none; width: 500px; height: 500px;">Página 2</div>
<div id="Capa3" style="background-color: green; display: none; width: 500px; height: 500px;">Página 3</div>
<div id="Capa4" style="background-color: grey; display: none; width: 500px; height: 500px;">Página 4</div>
<div id="Capa5" style="background-color: orange; display: none; width: 500px; height: 500px;">Página 5</div>
</div>
</body>
</html>
Espero que te sirva. Saludos