jQuery: Make Full DIV Container Clickable

Just use the following function for this:

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

If you click on an element, to which the class "clickable" was assigned, the address of the of the link, which is licated within this element, will be read out and the URL will be called.

Of course, you can also take $("div") instead of $(".clickable"). This would, however, make each DIV container on your page a clickable element, what you probably do not want. Therefore, it is better to use a separate class for all clickable elements (not only DIVs). This class, you have to assign to all elements, that should be clickable:

<div class="a clickable"><a href="page1.htm">1</a></div>
<div class="b clickable"><a href="page2.htm">2</a></div>
<div class="c clickable"><a href="page3.htm">3</a></div>
<div class="d clickable"><a href="page4.htm">4</a></div>

Furthermore, you can also write this into your CSS file:

.clickable {
   cursor: pointer;
}

Hereby, also the cursor will be displayed as usual with links, when it is over the DIV container, so that the vistors of your page know, where they can click.
2012-07-20 at 15:16