Caja que aparece y desaparece

Calizman · #1 (**permalink**) 16/04/2009, 17:53

Saludos Foreros de JS!

Es mi primera aventura en JS y realmente no tengo ni la menor idea de lo que estoy haciendo, pero gracias a las FAQS y a Google, he podido armar algo asi como un script (Asi se les dice cierto?)

Luego de un dia entero de investigar, decidi preguntarles a los sabios maestros de el foro de Java Script.

Antes de presentar mi Script, les explico lo que quiero:
tengo un menu lateral de 10 opciones, lo que quiero es que cuando alguen haga click sobre cada opcion, un cuadro aparezca a el lado derecho con su definicion y que cuando hagan click en el siguiente enlace, el que antes presionaron desaparezca y aparezca el nuevo cuadro. Me explique?

Tengo esto:

Código JavaScript:

Ver original<script type="text/javascript">
var capa
function cambio(idCapa){
if (document.layers) capa = eval("document." + idCapa);
if (document.all) capa = eval(idCapa + ".style");
if (document.getElementById) capa = eval('document.getElementById("' + idCapa + '").style');
if ((capa.visibility == "hidden") || (capa.visibility == "hide")){
capa.visibility = (document.layers) ? "show" : "visible" ;
}else{
capa.visibility = (document.layers) ? "hide" : "hidden" ;
}
}
//-->
</script>

Y aqui tengo el HTML (son 10 opciones, pero para no hacer todo largo, solo escribire dos de las que tengo, las demas son iguales... solo cambia el numero)

Código HTML:

Ver original<ul>
<li>
<a href="#" onclick="cambio('capa1')">Cursos de Programacion</a>
</li>
<li>
<a href="#" onclick="cambio('capa2')">Cursos de Ofimatica</a>
</li>
</ul>
<div id="capa1">
</div>
<div id="capa2">
</div>

Desde ya, muy agradecido a todos por su ayuda

buzu · #2 (**permalink**) 16/04/2009, 19:28

Hola, como anda to'?

Mira te dejo este ejemplo (intencionalmente) mal hecho que acabo de hacer. No para que copies y pegues, sino para que te des una idea.

Código javascript:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>CaliZzZz</title>
    <script type="text/javascript">
        function init(){
            c1 = document.getElementById('capa1');
            c2 = document.getElementById('capa2');
            
            c1.style.display = c2.style.display = 'none';
        }
        oldCapa = null;
        function cambio(capa){
            if(oldCapa != null){
                document.getElementById(oldCapa).style.display = 'none';
            }
            document.getElementById(capa).style.display = 'block';
            oldCapa = capa;
        }
        
        window.onload = init;
    </script>
</head>
<body>
   <ul>
        <li>
            <a href="#" onclick="cambio('capa1')">Cursos de Programacion</a>
        </li>
        <li>
            <a href="#" onclick="cambio('capa2')">Cursos de Ofimatica</a>
        </li>
    </ul>
    <div id="capa1">
        kljlsdaf
    </div>
    <div id="capa2">
        ljklsajfl@@@@@@22222222
    </div>
</body>
</html>

Calizman · #3 (**permalink**) 16/04/2009, 19:37

Muchisimas gracias Buzu! exactamente eso era lo que queria, aprender... no copiar y pegar!

Gracias!! y Hasta Luego!!