Foros del Web » Diseño web » CSS »

al hacer click desaparecer div

Estas en el tema de al hacer click desaparecer div en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 11/01/2010, 10:22
 
Fecha de Ingreso: febrero-2008
Mensajes: 656
Antigüedad: 6 años, 2 meses
Puntos: 5
al hacer click desaparecer div

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
  #2 (permalink)  
Antiguo 11/01/2010, 10:23
Avatar de David
Moderador
 
Fecha de Ingreso: abril-2005
Ubicación: In this planet
Mensajes: 15.698
Antigüedad: 9 años
Puntos: 816
Respuesta: al hacer click desaparecer div

Para ese tipo de comportamientos, probablemente sea mejor usar Javascript. En el evento onclick puedes ocultar el elemento:
Código Javascript:
Ver original
  1. document.getElementById("id_del_elemento").style.display = "none";
Y para mostrar un elemento cambia "none" por "block"
__________________
Por favor, antes de preguntar, revisa la Guía para realizar preguntas.
  #3 (permalink)  
Antiguo 11/01/2010, 10:34
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.932
Antigüedad: 5 años, 8 meses
Puntos: 105
Respuesta: al hacer click desaparecer div

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
  1. <div id="div1" onclick="this.style.display='none';document.getElementById('div2').style.display='block';">contendido del div1</div>
  2. <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.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #4 (permalink)  
Antiguo 11/01/2010, 10:38
 
Fecha de Ingreso: febrero-2008
Mensajes: 656
Antigüedad: 6 años, 2 meses
Puntos: 5
Respuesta: al hacer click desaparecer div

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>
  #5 (permalink)  
Antiguo 11/01/2010, 10:44
 
Fecha de Ingreso: febrero-2008
Mensajes: 656
Antigüedad: 6 años, 2 meses
Puntos: 5
Respuesta: al hacer click desaparecer div

Ok, masterojitos, me funciona bien tu codigo, pero.... y si quisiera darle formato mediante css?
  #6 (permalink)  
Antiguo 11/01/2010, 10:46
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.932
Antigüedad: 5 años, 8 meses
Puntos: 105
Respuesta: al hacer click desaparecer div

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

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

Suerte.
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #7 (permalink)  
Antiguo 11/01/2010, 10:48
Avatar de masterojitos  
Fecha de Ingreso: julio-2008
Ubicación: Lima Callao Chucuito
Mensajes: 1.932
Antigüedad: 5 años, 8 meses
Puntos: 105
Respuesta: al hacer click desaparecer div

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 ????
__________________
Atte. MasterOjitos :ojotes:
Todo sobre Programación Web
Las ultimas tendencias en Efectos y Recursos Web: MasterOjitos Blog
  #8 (permalink)  
Antiguo 11/01/2010, 10:57
 
Fecha de Ingreso: febrero-2008
Mensajes: 656
Antigüedad: 6 años, 2 meses
Puntos: 5
Respuesta: al hacer click desaparecer div

ok, muchas gracias de todo corazon y perdona mi ignorancia
  #9 (permalink)  
Antiguo 09/02/2014, 17:55
 
Fecha de Ingreso: marzo-2011
Mensajes: 3
Antigüedad: 3 años, 1 mes
Puntos: 0
Respuesta: al hacer click desaparecer div

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



La zona horaria es GMT -6. Ahora son las 10:04.
SEO by vBSEO 3.3.2