使 div 成为可点击的链接答案

【问题标题】：Making div a clickable link使 div 成为可点击的链接
【发布时间】：2011-09-27 07:56:17
【问题描述】：

我有一个 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。

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

【问题讨论】：

标签： php javascript jquery html css

【解决方案1】：

如果您想让整个 div 可点击，请尝试将 <a> 元素设置为块元素，并使其大小与父 <div> 相同，即，

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

【讨论】：

+1 是的 @Callum Whyte 如果你在链接上设置了display: block;，它的作用就像<div>，你可以根据自己的喜好设置它的样式。使用 javascript 使 div 像链接一样，对 SEO 不友好，IMO 应该避免这样做。
这绝对是首选方式。使用 JavaScript 使 div 可点击停止在新选项卡或窗口中打开的能力。许多用户经常使用的功能。
是的，通过使用 display: block 来避免 divitis (en.wiktionary.org/wiki/divitis)。我敢打赌你的其他一些 div 也是不必要的。

【解决方案2】：

使用 jQuery：

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

【讨论】：

你的项目中加载了 jQuery 吗？

【解决方案3】：

不是

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

你需要什么？

【讨论】：

我知道这已经 10 岁了，但正是我需要的，干杯 @Headcrab

【解决方案4】：

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

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

【讨论】：

另外，作为一名网络开发人员，我不得不承认，当他们使用 javascript 来完成 css 可以做得很好的事情时，我会责怪其他人的无能。
你不能在 div 元素周围放置锚点来通过 W3 验证。
@imoda：没错。因此“完全放弃 div”。

【解决方案5】：

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

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

【讨论】：

这里的第一行应该是$(".webresult")（错过了句号）。
@jack：感谢您的关注！ @callum：它是 jQuery。您将首先加载 jQuery 库，然后使用上面的。如果这是您在页面上使用的唯一 JS，那么 jQuery 当然是大材小用了。

【解决方案6】：

我会用 jQuery 来做这个：

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

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

【讨论】：