0 0 Votes

jQuery: Make Full DIV Container Clickable

Question by Translated Content | 18/07/2012 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

Stefan Trost

Show Profile | Message
Avatar
11 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.
20/07/2012 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.
19/06/2015 at 13:11

Positive Negative

Anja Proggy

Show Profile | Message
Avatar
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.
19/06/2015 at 18:49

Positive Negative
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 articles on askingbox.com. How to do.