使 div 成为可点击的链接

Question

I have a PHP search script that parses results into HTML div elements to make styling the results easier. I have the following code:

<div class='webresult'><div class='title'><a href='{$row['url']}'>{$row['title']}</a></div><div class='url'>{$row['url']}</div><div class='desc'>{$row['description']}</div></div>

I want to make it so when a the whole webresult div is clicked on, it goes to the url of the result.

I hope people can understand what I'm trying to describe.

Answer 1

If you want to make the entire div clickable, try to style the <a> element as a block element and make its size equivalent to the parent <div> , ie,

.title a {
  display: block;
  width: 100%;
  height: 100%;
}

Answer 2

use jQuery:

$('.webresult').click(function() {
   window.location.href = $(this).find('a').attr('href');
});

Answer 3

Best to do this via javascript. If using jQuery, you could do this:

$('.webresult').click(function(){
    $('this').find('a').click();
})

Answer 4

Wrap the anchor around everything instead of just the row title, and set it to display: block; in css. Further style the anchor the way you previously styled the div, and drop the div altogether. You probably also want to set the text color (including for:hover) and remove the underline using the text-decoration property.

If you decide to go with one of the javascript options the others posted, make sure you have a graceful fallback. Not everyone has javascript enabled.

Answer 5

I would do this with jQuery:

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

Another solution is that within the HTML 5 spec, block elements can actually be links to other places. You can read more about that here: http://html5doctor.com/block-level-links-in-html-5/

Answer 6

isn't

<div onclick="location.href='/the_url/'">

what you need?