HTML - 如何使整个 DIV 成为超链接？ [复制]答案

【问题标题】：HTML - how to make an entire DIV a hyperlink? [duplicate]HTML - 如何使整个 DIV 成为超链接？ [复制]
【发布时间】：2011-01-12 09:29:55
【问题描述】：

如何使整个DIV 成为可点击的超链接。意思是，我基本上想做：

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

每当有人将鼠标悬停在 myclass DIV 上时，我希望整个 DIV 成为可点击的超链接。

【问题讨论】：

您可以将任何您想要的内容放入<a> 元素中。这里没有理由使用<div>。
<div /> 是一个应该包含其他元素或信息的元素，<a /> 是一个元素，它对这些信息（导航、分页等）进行“操作”，所以为什么要这样做当您拥有<a /> 时，您想拥有一个完整的可点击 div 吗？
@SLacks：这不是真的。 <a> 是一个内联级元素，只能容纳内联级元素。这意味着拥有<div> 和/或<table> 具有<a> 的子级不是有效的XHTML。要解决此限制，请使用内联元素和 CSS 将它们显示为块级元素。有关内联元素的列表，请参阅 cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html。
嗯，我认为在开发网站应用程序时，如果你真的想要拥有有效的代码，不如使用像 html 4.01 trans 这样不那么严格的验证模型。或 html 5，它接受块元素 insde 让我们说 <a />... 也想象一下 google bot，您认为它可以仅从 window.open('example.com', 'wnd'); 抓取您的页面吗？这就是火焰开始的方式...... :-D
w3.org/WAI/WCAG21/Techniques/failures/F59

【解决方案1】：

您可以将 JavaScript 的 onclick 添加到 div 中。

<div onclick="location.href='newurl.html';">&nbsp;</div>

编辑：新窗口

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>

【讨论】：

当我这样做时，我的鼠标光标不会像悬停在链接上时那样变成手。我做错了什么？
您需要使用 window.open。有许多预设脚本可以执行此操作。 javascript-coder.com/window-popup/javascript-window-open.phtml
如果您将移动修改为，光标：指针 - 有效
使用cursor: pointer 而不是cursor: hand。
这对 SEO 来说不是很好。如果超链接是用 JavaScript 编码的，搜索引擎不会看到它。

【解决方案2】：

您可以在<div> 中放置一个<a> 元素并将其设置为display: block 和height: 100%。

【讨论】：

那行不通，因为我在 DIV 中有很多内容。我将更新我的原始帖子以使其更具描述性
@Teddy：将position:relative; 添加到div，然后将position: absolute; height: 100%; 添加到a...应该使div 的整个区域都处于活动状态。跨度>
您可以将所有内容放入<a>。
演示：jsbin.com/adoka
这不是真的。 <a> 是一个内联级元素，只能容纳内联级元素。这意味着拥有<div> 和/或<table> 具有<a> 的子级不是有效的XHTML。要解决此限制，请使用内联元素和 CSS 将它们显示为块级元素。有关内联元素的列表，请参阅 cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html。

【解决方案3】：

您只需将光标指定为指针，而不是手，因为指针现在已成为标准，因此，这是示例页面代码：

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

以及示例 CSS：

#smallbox {
    cursor: pointer;
}

所以 div 现在是一个使用“onclick”的可点击元素，并且您已经使用 CSS 伪造了手形光标...完成了，对我有用！

【讨论】：

【解决方案4】：

这是一个较晚的答案，但这个问题在搜索结果中出现的频率很高，因此值得正确回答。

基本上，您不应该尝试使 div 可点击，而是通过为 <a> 标记提供 display: block CSS 属性来制作锚点 div。

这样，您的 HTML 在语义上仍然有效，并且您可以继承超链接的典型浏览器行为。即使 javascript 被禁用/js 资源不加载，它也可以工作。

【讨论】：

【解决方案5】：

将onclick 添加到您的DIV 标记中。

【讨论】：

【解决方案6】：

你为什么不这样做

<a href="yoururl.html"><div>...</div></a>

这应该可以正常工作，并且会提示“可点击项目”光标更改，而上述解决方案不会这样做。

【讨论】：

【解决方案7】：

替代方案是 javascript 并通过 onclick 事件转发

<div onclick="window.location.href='somewhere...';">...</div>

【讨论】：