Hacer un div clickable
3 seguidores
Tengo una serie de divs que quiero hacer clickables a partir de un enlace que tienen dentro.
Con css he puesto el display:block en el enlace, pero el problema que tengo es que en el div hay más elementos a parte del enlace, y estos o bien quedan fuera del div o bien hacen que no sea completamente clickable.
Es algo así:
div
enlace principal
...texto...
enlace secundario
div
Y al clickar en cualquier parte del div se debería activar el enlace principal. ¿Como puedo hacer esto?
PD. No consigo que aparezca el html en el post, así que las etiquetas html no salen :(
serka
Creo que tendrás que meter todo el contenido dentro de la etiqueta 'a' con comportamiento de bloque, a esa le pones la dirección de enlace principal, y el enlace secundario, en realidad no sirve no?, por que si quieres que pinchando en cualquier parte del div se abra el enlace principal.... le puedes dar simplemente estilo de link con css.
Usuario desconocido
No es una práctica recomendable anidar un "div" y su contenido dentro de una etiqueta "a" para permitir el clic en todo el "div", ya que "a" es un elemento en-línea (in-line).
Puedes intentar otras aproximaciones con css y javascript. Te preparé un pequeño ejemplo con javascript, usando jquery: http://mb.diptongonante.com/demos/click-box.html
html:
Un título
El texto que va dentro de la caja
(El espacio extra que puse al abrir cada etiqueta es sólo para la correcta visualización en este foro).
css:
.caja{ border:1px solid #000; cursor:pointer; padding:1em; width:20em;}.caja h1 a{ display:block;}
javascript:
$(document).ready(function(){
$(".caja").click(function(){
window.location = $(this).find("h1:first a:first").attr("href");
});
});
En estos enlaces puedes ver otras soluciones:
Con javascript: Link boxes - Ask the CSS guy
Con CSS: Link Boxes - Promotion Sickness
Con jquery: Block clickable - Web Designer Wall
serka
me refería a:
...
enlace
contenido
enlace secundario (que no funcionaria realmente)
...
leh
Gracias Sanyaissues,
al final voy a hacerlo usando javascript porque solo con css no consigo hacerlo funcionar.
serka cuando meto un enlace dentro de otro se fastidia el invento, si no hay enlace funciona sin problemas, pero ese enlace secundario debe funcionar y a punta a una página diferente, así que lo tendré que hacer con javascript.
Usuario desconocido
Actualicé el ejemplo para que te funcione con dos enlaces:
Enlace 1
Al hacer clic en cualquier parte de la caja se activa Enlace 1.
Enlace 2
http://mb.diptongonante.com/demos/click-box.html
leh
gracias por el código, hace justo lo que andaba buscando.
grmn
Hey!!!
Una pregunta, como le agrego el attr "rel" a esto??
Tengo un lightbox y quiero que haga cick el div . . . y para eso necesito tener el rel para que me respete la galería.
$(document).ready(function(){
$(".caja").click(function(){
window.location = $(this).find("h1:first a:first").attr("href");
});
});
Gracias!!!
Germán.-