Foros del Web » Programando para Internet » Javascript »

Hacer que aparezca un div al clicar en un enlace

Estas en el tema de Hacer que aparezca un div al clicar en un enlace en el foro de Javascript en Foros del Web. Hola a todos, he estado buscando por internet, y he encontrado algunos, pero quiero que para volverlo a cerrar le tengas que dar en algun ...
  #1 (permalink)  
Antiguo 01/11/2014, 02:38
 
Fecha de Ingreso: enero-2013
Mensajes: 33
Antigüedad: 11 años, 6 meses
Puntos: 0
Hacer que aparezca un div al clicar en un enlace

Hola a todos,
he estado buscando por internet, y he encontrado algunos, pero quiero que para volverlo a cerrar le tengas que dar en algun lugar fuera del div o en el enlace con el que lo has abierto.

Gracias de antemano
Oriol
  #2 (permalink)  
Antiguo 01/11/2014, 02:46
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 3 meses
Puntos: 67
Respuesta: Hacer que aparezca un div al clicar en un enlace

Para cerrarlo clikeando fuera del div o dandole a cualquier parte puedes asignarlo al body por ejemplo.

Código Javascript:
Ver original
  1. function CerrarDiv(){
  2. document.getByElementId("nombre_div").style.display = "none";
  3. }

Código HTML:
Ver original
  1. <body onClick="CerrarDiv();">

Saludos.
  #3 (permalink)  
Antiguo 01/11/2014, 02:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 3 meses
Puntos: 1284
Respuesta: Hacer que aparezca un div al clicar en un enlace

Hola:

Digo yo, ¿Porqué un enlace?, si evidentemente tu intención no es enlazar...

Te aconsejo usar un botón, que semánticamente es el elemento más aconsejable para estas ocasiones... luego con estilos puedes darle cualquier apariencia... hasta la de los enlaces...

En línea, sería algo así:

<button type="button"
onclick="document.getElementById('mi_div').style.d isplay = (document.getElementById('mi_div').style.display == 'none') ? 'block':'none'" >
efecto
</button>
<div id="mi_div" style="display: none">
<!--contenido del div-->
</div>

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo

Última edición por caricatos; 02/11/2014 a las 16:04 Razón: ortografía
  #4 (permalink)  
Antiguo 01/11/2014, 13:24
 
Fecha de Ingreso: enero-2013
Mensajes: 33
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Hacer que aparezca un div al clicar en un enlace

Hola, he probado una combinación de los dos códigos y no me ha funcionado:
Código HTML:
<!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=iso-8859-1" />
<title>Documento sin t&iacute;tulo</title>
<script type="text/javascript">
    function CerrarDiv(){
    document.getByElementId("mi_div").style.display = "none";
    }
	</script>
</head>

<body onClick="CerrarDiv();">

<button type="button" onclick="document.getElementById('mi_div').stylr.d isplay = (document.getElementById('mi_div').style.display == 'none') ? 'block':'none'" >
efecto
</button>
<div id="mi_div" style="display: block">
Hola
</div>

</body>
</html> 
Por cierto, no tengo ni idea de javascript.
Gracias
Oriol Forcada
  #5 (permalink)  
Antiguo 01/11/2014, 16:55
Avatar de caricatos
Moderador
 
Fecha de Ingreso: abril-2002
Ubicación: Torremolinos (Málaga)
Mensajes: 19.607
Antigüedad: 22 años, 3 meses
Puntos: 1284
Respuesta: Hacer que aparezca un div al clicar en un enlace

Hola:

Código:
he probado una combinación de los dos códigos y no me ha funcionado
...

Código:
Por cierto, no tengo ni idea de javascript.
¡Sin palabras!

... ¿Y sin mezclas...?

Saludos
__________________
Por favor:
No hagan preguntas de temas de foros en mensajes privados... no las respondo
  #6 (permalink)  
Antiguo 02/11/2014, 02:27
Avatar de MaNuX0218  
Fecha de Ingreso: marzo-2014
Mensajes: 787
Antigüedad: 10 años, 3 meses
Puntos: 67
Respuesta: Hacer que aparezca un div al clicar en un enlace

Devería quedarte de está manera:

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=iso-8859-1" />
  4. <title>Documento sin t&iacute;tulo</title>
  5. <script type="text/javascript">
  6. function AbrirDiv(){
  7.     document.getByElementId("mi_div").style.display = "block";
  8.     }
  9.    
  10. function CerrarDiv(){
  11.     document.getByElementId("mi_div").style.display = "none";
  12.     }
  13.     </script>
  14. </head>
  15.  
  16. <body onClick="CerrarDiv();">
  17.  
  18. <button type="button" onclick="AbrirDiv()" >
  19. efecto
  20. <div id="mi_div" style="display:none">
  21. Hola
  22. </div>
  23.  
  24. </body>
  25. </html>

Esto aria que cuando haces clic en el boton lo muestre y si aces clic fuera se cierre.

Saludos.
  #7 (permalink)  
Antiguo 02/11/2014, 07:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 16 años
Puntos: 1012
Respuesta: Hacer que aparezca un div al clicar en un enlace

Cita:
Iniciado por MaNuX0218 Ver Mensaje
Devería quedarte de está manera:

.............

Esto aria que cuando haces clic en el boton lo muestre y si aces clic fuera se cierre.

Saludos.
esa es una manera poco eficiente de hacerlo. a cada click en el body se invocará la función
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #8 (permalink)  
Antiguo 02/11/2014, 10:42
 
Fecha de Ingreso: enero-2013
Mensajes: 33
Antigüedad: 11 años, 6 meses
Puntos: 0
Respuesta: Hacer que aparezca un div al clicar en un enlace

MaNuX0218, he probado tu código y no me ha funcionado, pero creo, que si la funcion para cerrar el div esta aplicada a todo el body, entonces si le das dentro del div desplegable tembien se cerraría no? Se podria hacer que fuera dandole fuera del div solo.
Gracias
Oriol

Etiquetas: aparezca, enlace
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 23:58.