mostrar y ocultar capas ... inconveniente

[the_web_saint]

Código html:

<script language="Javascript">
    function ocultar()
        {
        for(i=1; i<=10; i++)
                document.getElementById('capa'+i).style.visibility="hidden";
        }
 
    function mostrar(num)
        {
    ocultar();
        document.getElementById('capa'+num).style.visibility="visible";
        }
</script>
 
<a onclick="mostrar(1)" style="cursor:pointer">elemento 1</a>
    <div id="capa1" style="visibility:hidden">Capa 1</div>
 
<a onclick="mostrar(2) " style="cursor:pointer">elemento 2</a>
    <div id="capa2" style="visibility:hidden">Capa 2</div>
 
<a onclick="mostrar(3)" style="cursor:pointer">elemento 3</a>
    <div id="capa3" style="visibility:hidden">Capa 3</div>
 
<a onclick="mostrar(4) " style="cursor:pointer">elemento 4</a>
    <div id="capa4" style="visibility:hidden">Capa 4</div>
 
<a onclick="mostrar(5)" style="cursor:pointer">elemento 5</a>
    <div id="capa5" style="visibility:hidden">Capa 5</div>
 
<a onclick="mostrar(6) " style="cursor:pointer">elemento 6</a>
    <div id="capa6" style="visibility:hidden">Capa 6</div>
 
<a onclick="mostrar(7)" style="cursor:pointer">elemento 7</a>
    <div id="capa7" style="visibility:hidden">Capa 7</div>
 
<a onclick="mostrar(8) " style="cursor:pointer">elemento 8</a>
    <div id="capa8" style="visibility:hidden">Capa 8</div>
 
<a onclick="mostrar(9)" style="cursor:pointer">elemento 9</a>
    <div id="capa9" style="visibility:hidden">Capa 9</div>
 
<a onclick="mostrar(10) " style="cursor:pointer">elemento 10</a>
    <div id="capa10" style="visibility:hidden">Capa 10</div>
 

Prueba de esta forma a ver que tal.