mostrar y ocultar capas ... inconveniente

NannoSt · #1 (**permalink**) 08/04/2009, 11:36

buenas gente ...

antes que nada, ya se que esto esta en internet, visite muchos sitios para ver como lo hacian, pero no me gusta copiar y pegar el codigo completo, prefiero hacer todo lo que pueda yo y despues pedir que me den una mano, mas que nada para aprenderlo mejor y que me quede gravado de verdad ..

bueno, necesito mostrar y ocultar capas segun valla haciendo click en distintos elementos de una lista ...

Código que tengo hasta ahora:

Ver original<html>
<head>
<title>sandbox jeje</title>
 
<script language="Javascript">
    function mostrar(nombreCapa)
        {
        document.getElementById(nombreCapa).style.visibility="visible";
        }
    function ocultar(nombreCapa)
        {
        document.getElementById(nombreCapa).style.visibility="hidden";
        }
</script>
 
</head>
<body>
 
<a onclick="mostrar('capa2')" style="cursor:pointer">Capa 1</a>
    <div id="capa2" style="visibility:hidden">Capa 2</div>
 
<a onclick="mostrar('capa4'); ocultar('capa2');" style="cursor:pointer">Capa 3</a>
    <div id="capa4" style="visibility:hidden">Capa 4</div>
 
</body>
</html>

bueno, aclaro que lo estoy haciendo aparte, y despues lo voy a integrar a la lista ...

el problema esta, que con el codigo que tengo ahora, puedo mostrar y oculat solo 2 capas, pero yo necesito hacerlo con 10 capas diferentes ...

bueno, yo se que para hacer que se oculte la capa 3 quiero mostrar la capa 7, necesito un for que valla de 1 a 10 y que valla ocultando las que esten visibles a ecepcion de la numero 7 ...

Código del if:

Ver originalif(nombreCapa = capa[i]) 
    {
    next;
    }
  
    else
        {
        document.getElementById(nombreCapa).style.visibility="hidden"
        }

pero la verdad, no tengo idea de como agregarlo al codigo que ya hice :S

alguien que le tire un flotador a este que se esta ahogando ??

gracias!

edito!

creo que esto tendria que ir asi ..

Código Js:

Ver original<script language="Javascript">
    function mostrar(nombreCapa)
        {
        document.getElementById(nombreCapa).style.visibility="visible";
        }
    function ocultar(nombreCapa)
        {
        if(nombreCapa = capa[i]) 
            {
            next;
            }
  
            else
                {
                document.getElementById(nombreCapa).style.visibility="hidden"
                }
        }
</script>

pero no se como tendria que ir en la parte de los divs :S

the_web_saint · #2 (**permalink**) 08/04/2009, 12:49

Uhmmm bueno, creo que si llamas a la función ocultar antes de cambiar el estilo de la capa en mostrar, ocultando todas y luego muestras la que deseas es menos complicado no?

En los div`s colocas un enlace que al darle click llame a la función mostrar enviandole el número del div que deseas mostrar.

Saludos

NannoSt · #3 (**permalink**) 08/04/2009, 13:05

entonces quedaria algo asi ?

Código Js:

Ver original<script language="Javascript">
    function ocultar(nombreCapa)
        {
        if(nombreCapa = capa[i]) 
            {
            next;
            }
  
            else
                {
                document.getElementById(nombreCapa).style.visibility="hidden"
                }
        }
 
    function mostrar(nombreCapa)
        {
        document.getElementById(nombreCapa).style.visibility="visible";
        }
</script>

y la parte de los divs

Código capas:

Ver original<a onclick="ocultar('capa[2]'); mostrar('capa[2]')" style="cursor:pointer">elemento 1</a>
    <div id="capa2" style="visibility:hidden">Capa 2</div>
 
<a onclick="ocultar('capa[4]'); mostrar('capa[4]') " style="cursor:pointer">elemento 3</a>
    <div id="capa4" style="visibility:hidden">Capa 4</div>

recien toy aprendiendo js y se me complica un toquesin, ayer fue la primer clase y solo vimos variables

estarian bien asi ??

gracias por tu respuesta!

NannoSt · #4 (**permalink**) 08/04/2009, 13:35

no me funciona

the_web_saint · #5 (**permalink**) 08/04/2009, 13:51

Código html:

Ver original<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.

buzu · #6 (**permalink**) 08/04/2009, 18:08

Waith waith.... Estas sobre cargando con tanto for loop. Los loops se deben evadir en lo posible. Lo que tienes que hacer es registrar en una variable el último que ha estado visible, de esta manera simplemente escondes el que esta oculto y no vas por ahí escondiendo todo con un loop. Si haces de esta manera que te digo, habrás mejorado el desempeño de tu sitio.

the_web_saint · #7 (**permalink**) 09/04/2009, 07:36

Uhm excelente. Muchas Gracias por la aclaración.

Saludos buzu.