al hacer click desaparecer div

visona · #1 (**permalink**) 11/01/2010, 11:22

Buenas tardes;
Tengo un problema que no llego a solucionarlo.
Tengo 2 divs uno se llama div id="1" y otro div id="2" lo que quiero hacer es que cuando haga click en el div 1 este desaparezca y aparezca el div 2- Alguien me puede echar una mano?
Gracias

David · #2 (**permalink**) 11/01/2010, 11:23

Para ese tipo de comportamientos, probablemente sea mejor usar Javascript. En el evento onclick puedes ocultar el elemento:

Código Javascript:

Ver originaldocument.getElementById("id_del_elemento").style.display = "none";

Y para mostrar un elemento cambia "none" por "block"

masterojitos · #3 (**permalink**) 11/01/2010, 11:34

en cualquier momento te mueven de foro no te preocupes.... por lo mientras te recomiendo que cambies los nombres de id a un que sea alfanumero por lo menos..... es decir:
uno se llama div id="div1" y otro div id="div2"

Código HTML:

Ver original<div id="div1" onclick="this.style.display='none';document.getElementById('div2').style.display='block';">contendido del div1</div>
<div id="div2" style="display:none" onclick="this.style.display='none';document.getElementById('div1').style.display='block';">contendido del div2</div>

por lo normal, el div2 deberia empezar oculto, para que respete la logica..... style="display:none"

Suerte.

visona · #4 (**permalink**) 11/01/2010, 11:38

Me podrias explicar como hacerlo? o sea un ejemplo con codigo y donde colocar ese que me pones.
el codigo que yo tengo es este
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="css/prueba_div1.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="div1" id="1">Hola este es el 1
</div>
<div class="div2" id="2"> Hola, este es el 2
</div>
</body>
</html>

visona · #5 (**permalink**) 11/01/2010, 11:44

Ok, masterojitos, me funciona bien tu codigo, pero.... y si quisiera darle formato mediante css?

masterojitos · #6 (**permalink**) 11/01/2010, 11:46

y te es dificil reemplazar:
<div class="div1" id="1">Hola este es el 1
</div>
<div class="div2" id="2"> Hola, este es el 2
</div>

por lo que te pase???

Tu codigo ha de quedar asi:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<link href="css/prueba_div1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="div1" id="div1" onclick="this.style.display='none';document.getElementById('div2').style.display='block';">Hola este es el 1</div>
<div class="div2" id="div2" style="display:none" onclick="this.style.display='none';document.getElementById('div1').style.display='block';">Hola este es el 2</div>
</body>
</html>

dale click a donde dice "Ver Original" y listo.

Suerte.

masterojitos · #7 (**permalink**) 11/01/2010, 11:48

lo de formato que acabas de postear........ ps que no sabes html css ?????

para que referencias esto:
<link href="css/prueba_div1.css" rel="stylesheet" type="text/css" />

supongo que ahi deberias tener algo como:
.div1{

}
.div2{

}

o que sucede ahora ????

visona · #8 (**permalink**) 11/01/2010, 11:57

ok, muchas gracias de todo corazon y perdona mi ignorancia

shuly79 · #9 (**permalink**) 09/02/2014, 18:55

hola

necesitaria ayuda tengo una lista y necesitaria que al hacer click en los enlaces en un div colocado al lado de la lista aparezca una imagen como hago????

gracias