Turn a div into a link

Question

I googled how to turn a div into a link but there seem to be a lot of techniques, none of which seem like they would work well in IE.

What is the best/simplest technique for turning a div into a link?

Answer 1

What do you mean "into a link"? You could do this:

#mydiv {
  color: #00f;
  cursor: pointer;
}
#mydiv:hover {
  color: #f0f;
}

Answer 2

or do you mean this?

<div onClick="window.location = 'http://www.cannonade.net';"&gt;blah&lt;/div&gt;

Answer 3

Raw JavaScript:

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

jQuery:

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

Or

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

jQuery:

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

The above code cancels the default action of link (going to link) with return false and binds the click event to the div with class myBox, then it finds the link's src attribute inside the div and window.location is used to redirect the page to the src attribute of the link present inside the div. So this basically makes the div clickable.

Answer 4

Why not use an anchor tag and display it as a block element?

a { 
   display: block; 
   //remaining code here
}