2010-07-20 22 views
7

Tengo un enlace dentro de un div y necesito para hacer el todo se puede hacer clic div ... encontré varios tutoriales en Internet, pero no de ellos trabajó para mí ...hacer un todo se puede hacer clic div

+0

¿Puede pegar algunos fragmentos de código aquí de lo que no funciona? –

+0

Como vi en Internet, debo agregar el atributo display: block al div pero no funciona ... además encontré una solución javascript pero no funcionó tan bien: http: // css-tricks. com/snippets/jquery/make-entire-div-clickable/ –

+1

¿Por qué está etiquetado como css? Debería ser javascript – Nick

Respuesta

10

Si dice que quiere que se pueda hacer clic en todo div para la navegación, puede envolverlo con una etiqueta ancla(), que no es compatible con los estándares, o agregar un estilo css a la etiqueta ancla contenida, haciéndolo del tamaño del div que contiene, que cumple con los estándares. Usaré un div que es 250px por 250px en este ejemplo:

<div id="container"><a href="" style="display:block;width:250px;height:250px;">Link</a></div> 
+0

Esto es justo lo que estaba buscando. ¡¡¡Gracias!!! –

+1

¿Por qué no es compatible con los estándares tener un 'div' dentro de una 'a'? ¿Hay algún recurso útil en alguna parte que dicte qué elementos pueden residir en qué (me doy cuenta de que el nivel de bloque dentro de línea es incorrecto, pero ...)? – Eric

+0

No puede tener un elemento de visualización de bloque contenido en un elemento en línea. Está bien. No va a romper su código en los navegadores, pero lo más probable es que no valide correctamente. Me alegro de poder ayudar, Levani. –

21

Raw JavaScript :

<div onclick="alert('You clicked me !')">Click Me</div> 

jQuery:

$('#div_id').click(function(){ 
    alert('Clicked !!'); 
}); 

actualización: (Con referencia a su enlace)

<div class="myBox"> 
    blah blah blah. 
    <a href="http://google.com">link</a> 
</div> 

jQuery:

$(".myBox").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
}); 

El código anterior, cancela la acción predeterminada de enlace (que va a enlazar) con return false y se une al evento click a la div con la clase myBox, luego encuentra el atributo src del enlace dentro del div y window.location se usa para redirigir la página al atributo src del enlace presente dentro del div. Esto básicamente hace que el div se pueda hacer clic.

6

Me encontré con este problema el año pasado. Simplemente agregué un clic en el div. De este modo: <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">

+0

Corto y nítido: ¡exactamente lo que necesitaba! Gracias! – DerWOK

1

En HTML5 ahora es válida para tener una div o lo que sea dentro de un un. Eso debería hacer el truco. No se necesitan scripts, a menos que eso esté en su enlace.

0

Puedes utilizar un código JavaScript en para lograr tu objetivo, echa un vistazo a this tutorial.

$(".myBox").click(function(){ 
    window.location=$(this).find("a").attr("href"); 
    return false; 
    }); 

y este es el ejemplo de HTML:

<div class="myBox"> 
    blah blah blah. 
    <a href="http://google.com">link</a></div> 

pero hay una manera difícil de conseguir esto utilizando un código CSS debe anidar una etiqueta de anclaje dentro de la etiqueta div y debe aplicar esta propiedad a ella,

display:block; 

cuando lo haya hecho, que hará que toda la zona se puede hacer clic ancho (pero dentro de la altura de la etiqueta de anclaje), si se desea cubrir toda la zona div que mus t Ajuste la altura de la etiqueta de anclaje exactamente a la altura de la etiqueta div, por ejemplo:

height:60px; 

esto se va a hacer que toda la zona se puede hacer clic, a continuación, se puede aplicar text-indent:-9999px para anclar la etiqueta para lograr el objetivo.

esto es realmente complicado y simple, y se acaba de crear utilizando código CSS.

Aquí se presenta una example: http://jsfiddle.net/hbirjand/RG8wW/

Cuestiones relacionadas