Problema con capas

[ivimendoza]

Buenas chic@s.

Tengo el siguiente código JS:

Código Javascript:

<script language="JavaScript">
 
function muestra_oculta(id){
if (document.getElementById){ //se obtiene el id
var el = document.getElementById(id); //se define la variable "el" igual a nuestro div
el.style.display = (el.style.display == 'none') ? 'block' : 'none'; //damos un atributo display:none que oculta el div
}
}
window.onload = function(){/*hace que se cargue la función lo que predetermina que div estará oculto hasta llamar a la función nuevamente*/
muestra_oculta('div_a_mostrar');/* "contenido_a_mostrar" es el nombre que le dimos al DIV */
}
</script>
 

El caso es que su función es la siguiente: cuando lo llamo desde algún sitio me hace lo que tiene que hacer, oculta o muestra un DIV, hasta ahí bien, pero la cosa se complica cuando hay 2, 3, 4... div's yo lo que quiero es que cuando le de a un div, todos los demás se oculten y solo se muestre el que yo quiera, y así con todos.

He probado múltiples maneras y no hay manera, he buscado por Google pero el código que yo busco no es 100% el que necesito, y por eso acudo a vosotros, a ver si me podeis echar un cable entre todos y me sacáis de este aprieto.

Muchísimas gracias!

[America|UNK]

Deberìas añadir un atributo a los divs para agruparlos y poder mostrar u ocultar las capas correspondientes, por ejemplo agregando un atributo rel.
Hice este ejemplo para que tengas una idea, los links 'buttonDiv' muestran las capas que contienen el atributo grupoX_div y que contienen el nombre de clase del atributo href 'div_a_mostrar_x'

Código HTML:

<div id="buttons">
<a class="buttonDiv" href="#div_a_mostrar_1" rel="grupo1">1</a> <a class="buttonDiv" href="#div_a_mostrar_2" rel="grupo1">2</a>
 - 
<a class="buttonDiv" href="#div_a_mostrar_1" rel="grupo2">3</a> <a class="buttonDiv" href="#div_a_mostrar_2" rel="grupo2">4</a>
<div>
 
    <div class="div_a_mostrar_1" rel="grupo1_div">
        <div class="content">Div 1 grupo 1</div>
    </div>
    <div class="div_a_mostrar_2" rel="grupo1_div">
        <div class="content">Div 2 grupo 1</div>
    </div>
    
    <div class="div_a_mostrar_1" rel="grupo2_div">
        <div class="content">Div 1 grupo 2</div>
    </div>
    <div class="div_a_mostrar_2" rel="grupo2_div">
        <div class="content">Div 2 grupo 2</div>
    </div>
 

Código Javascript:

function hasClass(el,clase){return el.className.match(new RegExp('(\\s|^)'+clase+'(\\s|$)'))}
function muestra_oculta(clase,rel){
    var D = document.getElementsByTagName('*'), i;
    for(i=0;i<D.length;i++){
        if(D[i].getAttribute('rel') == rel + "_div"){
            D[i].style.display = 'none';
            if(hasClass(D[i],clase)) D[i].style.display = D[i].style.display == 'none' ? 'block' : 'none';
        }
    }
}
(function(clases,id){
    var d = document, z = d.getElementById(id), b = z.getElementsByTagName('a'), x;
    for(x=0;x<b.length;x++){
        if(hasClass(b[x],clases)){
            b[x].onclick = function(){ 
                var c = this.href ? this.href.split(/#/)[1] || '_' : '_';
                muestra_oculta(c,this.getAttribute('rel'))
            }
        }
    }
})('buttonDiv','buttons');
muestra_oculta('div_a_mostrar_1','grupo1')
muestra_oculta('div_a_mostrar_1','grupo2')