alternar la visibilidad de las capas

[amanda75]

Estoy intentado hacer un menú con los botones diseñados con css, y con javascript quiero que cada uno muestre un <div> diferente .

He encontrado estas dos funciones

var ie4 = (document.all) ? true : false;
var ns4 = (document.layers) ? true : false;
var ns6 = (document.getElementById && !document.all) ? true : false;

function ocultarcapa(lay) {
if (ie4) {document.all[lay].style.visibility = "hidden";}
if (ns4) {document.layers[lay].visibility = "hide";}
if (ns6) {document.getElementById([lay]).style.display = "none";}
}

function mostrarcapa(lay) {
if (ie4) {document.all[lay].style.visibility = "visible";}
if (ns4) {document.layers[lay].visibility = "show";}
if (ns6) {document.getElementById([lay]).style.display = "block";}
}

Todo funciona bien si en el body lo pongo así:

<div class="lateral">
<a href="javascript:mostrarcapa('capa1');">mostrar capa1</a> |
<a href="javascript:ocultarcapa('capa1');">ocultar capa1</a> |
<a href="javascript:mostrarcapa('capa2');">mostrar capa2</a> |
<a href="javascript:ocultarcapa('capa2');">ocultar capa2</a> |

</div>

Pero los botones están hechos para no utilizar enlaces y habría que ponerlo más o menos así:

<div class="lateral">
<span class="boton" onclick="javascript:mostrarcapa('capa1');" onfocus="javascript:mostrarcapa('capa1');" onblur="javascript:ocultarcapa('capa1');">mostrar capa1</span>

<span class="boton" onclick="javascript:mostrarcapa('capa2');" onfocus="javascript:mostrarcapa('capa2');" onblur="javascript:ocultarcapa('capa2');">mostrar capa2</span>

</div>

Pero no lo consigo. Aparecen las capas bien, en su sitio, pero las dos juntas. y yo lo que quiero es que al darle al boton1 aparezca la capa1 y desaparezca la capa2, y al darle al botón2 aparezca la capa2 y desaparezca la capa1

¿sabeis cual es el error?