Making an Entire Div Clickable

I wanted to make an entire div clickable — the destination for the click is derived from a link within the div that we give a class of ‘main_link’ to.

Insert the following jquery code into your page:

$(".stndBox").click(function(){
     window.location=$(this).find(".main_link").attr("href");
});

Your html code will look like the code below. The jquery will grab the href from the a tags with the class ‘main_link’. You can have additional links going to different locations, those will be ignored if they don’t have the ‘main_link’ class applied:

    
$(".stndBox").click(function(){ 				 
     window.location=$(this).find(".main_link").attr("href");  				 
});

Your html code will look like the code below. The jquery will grab the href from the a tags with the class ‘main_link’. You can have additional links going to different locations, those will be ignored if they don’t have the ‘main_link’ class applied:

<div class="stndBox">
     Div Content
     <a href="http://cnn.com" class="main_link">link</a>
</div>
<div class="stndBox">
     Div Content
     <a href="http://google.com" class="main_link">link</a>
</div>

I also changed the cursor, so while the mouse is over the clickable div, it all looks like a real link:

.stndBox{
     cursor: pointer
}