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

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

- Callum Whyte

Answer 1

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

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

- timdream

---

+1 是的 @Callum Whyte，如果在链接上设置 display: block;，它将像 <div> 一样运行，您可以根据自己的喜好进行样式设置。使用JavaScript使<div>像链接一样运行并不友好于SEO，我认为应该避免这种情况。 - Web_Designer

这绝对是首选的方法。使用JavaScript使div可点击会停止在新标签页或窗口中打开的能力，这是许多用户经常使用的功能。 - Trevor

使用 display: block 来避免 divitis (http://en.wiktionary.org/wiki/divitis)。我敢打赌你的其他一些 div 也是不必要的。 - Luke

Answer 2

使用jQuery：

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

- Inoryy

---

你的项目中加载了jQuery吗？ - Inoryy

Answer 3

最好通过JavaScript来实现。如果使用jQuery，你可以这样做：

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

- DA.

---

第一行应该是 $(".webresult")（漏掉了句号）。 - Jack Franklin

@jack：谢谢你发现了这个问题！@callum：这是jQuery。你需要先加载jQuery库，然后使用上面的代码。如果这是页面上唯一使用的JS，那么jQuery就有点大材小用了。 - DA.

Answer 4

不是

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

你需要什么？

- Headcrab

---

我知道这已经是10年前的内容了，但正是我所需要的，感谢@Headcrab。 - demsley

Answer 5

将锚点包裹在整个行标题周围，而不仅仅是行标题本身，并在css中将其设置为display:block。还要根据以前对

进行的样式设置样式锚点，并完全删除

。您可能还希望使用text-decoration属性设置文本颜色（包括:hover），并删除下划线。

如果您决定使用其他人发布的JavaScript选项之一，请确保具有优雅的回退方案。不是每个人都启用了JavaScript。

- Pianosaurus

---

作为一名网页开发者，我必须承认当别人使用 JavaScript 处理本应使用 CSS 的事情时，我会怪罪他们的无能。 - Pianosaurus

你不能在 div 元素周围放置锚点以通过 W3 验证。 - Steve Robbins

@imoda：没错。因此，“完全放弃这个div”。 - Pianosaurus

Answer 6

我会使用jQuery来完成这个任务：

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

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

- Jack Franklin