使 div 成为可点击的链接

Question

我有一个 PHP 搜索脚本，它将结果解析为 HTML div 元素，以使结果的样式更容易。 我有以下代码：

<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>

我想这样做，当单击整个 webresult div 时，它会转到结果的 url。

我希望人们能理解我试图描述的内容。

Answer 1

如果要使整个 div 可点击，请尝试将<a>元素设置为块元素，并使其大小等于父<div> ，即

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

Answer 2

使用 jQuery：

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

Answer 3

最好通过 javascript 执行此操作。 如果使用 jQuery，您可以这样做：

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

Answer 4

将锚点包裹在所有内容上，而不仅仅是行标题，并将其设置为display: block; 在 css 中。 以您之前设置 div 的方式进一步设置锚点的样式，并完全删除 div。 您可能还想设置文本颜色（包括 for:hover）并使用 text-decoration 属性删除下划线。

如果您决定 go 使用其他人发布的 javascript 选项之一，请确保您有一个优雅的后备。 不是每个人都启用了 javascript。

Answer 5

我会用 jQuery 做到这一点：

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

另一个解决方案是在 HTML 5 规范中，块元素实际上可以链接到其他地方。 您可以在此处阅读更多相关信息： http://html5doctor.com/block-level-links-in-html-5/

Answer 6

不是

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

你需要什么？