Make the whole div clickable

Question

I have a link inside a div, and I need to make the whole div clickable ... found some tutorials on the Internet, but they didn’t work for me ...

Answer 1

If you say you want the entire div to be navigable, you can either wrap it with an anchor () tag that is not standard, or add a css style to the contained anchor tag, which makes it the size of the containing div that is compliant. I am using a div at 250px by 250px in this example:

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

Answer 2

Raw JavaScript:

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

JQuery

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

Update: (with a link to your link)

 <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; }); 

The above code cancels the default link action (link to link) with return false and associates the click event with the div with the myBox class, then it finds the link src attribute inside the div and window.location used to redirect the page to the src attribute of the link present inside the div . Thus, this basically makes the div interactive.

Answer 3

I ran into this problem last year. I just added onclick to the div. For example: <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'"> <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">

Answer 4

In HTML5, a div or something else inside a now matters. This should do the trick. No scripting is required unless it is linked to your link.

Answer 5

You can use JavaScript code to achieve your goal, please see this tutorial .

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

and this is an example HTML:

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

but there is a difficult way to achieve this using CSS code you must insert the anchor tag inside your div tag, and you must apply this property to it,

 display:block; 

when you do this, it will make the width zone all clickable (but within the height of the attached tag), if you want to cover the entire div area, you must precisely set the height of the attached tag to the height of the div tag, for example:

 height:60px; 

this will make the whole area clickable, then you can apply text-indent:-9999px to the anchor tag to achieve the goal.

it is really complicated and simple, and it is simply created using CSS code.

here is an example : http://jsfiddle.net/hbirjand/RG8wW/