00 Votes

jQuery: Make Full DIV Container Clickable

Question by SmartUser | 2012-07-18 at 20:14

I have several DIV containers containing links on my website. Now, I wish, that you can click on the entire DIV and the link, which is placed within the appropriate container, is opened with this mouse click.

Here's an example of my HTML code:

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

So, if you click inside the first DIV container, the link to "page1.htm" should be followed, just as if you have clicked on the link itself.

How do you manage that with jQuery or JavaScript?

ReplyPositiveNegativeDateVotes
1Best Answer1 Vote

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

ReplyPositive Negative
00 Votes

I doesn't work if block has 2 or more links. This script applied first link to the block and if you click on second link - you will redirect on first link in anyway.
2015-06-19 at 13:11

Positive Negative
00 Votes

Yes, that is correct. One box - one link.

If you have more than one link in a box, you cannot make the whole box clickable, because nobody knows which link should then be applied.

If you want to do that, just put two inner link boxes in the outer box.
2015-06-19 at 18:49

Positive Negative
Reply
Reply

Related Topics

Scrollbar in DIV container

Question | 1 Answer

jQuery: Show and hide elements

Tutorial | 0 Comments

Important Note

Please note: The contributions published on askingbox.com are contributions of users and should not substitute professional advice. They are not verified by independents and do not necessarily reflect the opinion of askingbox.com. Learn more.

Participate

Ask your own question or write your own article on askingbox.com. That’s how it’s done.