logo标签列表

HTML——如何使整个DIV成为超链接？

htmlxhtmlhyperlink
95

如何使整个 DIV 成为可点击的超链接。也就是说，我希望实现以下效果：

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

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

4
你可以在<a>元素中放置任何你想要的内容。在这里使用<div>没有意义。 - SLaks
<div /> 是一个元素，它应该包含其他元素或信息，<a /> 是一个元素，它对这些信息进行“操作”（导航、分页等）。那么当你有 <a /> 时，为什么还要有一个整个可点击的 <div /> 呢？ - Juraj Blahunka
5
@SLacks：这不是真的。 <a> 是一个内联级别元素，只能容纳内联级别元素。这意味着在 <a> 中有以 <div> 和/或 <table> 为子元素是不合法的 XHTML。为了解决这个限制，可以使用内联元素和 CSS 将它们显示为块级元素。请参考 http://www.cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html 查看内联元素列表。 - Andrew Moore
我认为在开发网站应用程序时，如果你真的想要有效的代码，最好使用一个不那么严格的验证模型，比如HTML 4.01转换或HTML 5，它允许块元素嵌套在<a />中...还有就是想象一下Google机器人，你认为它能从window.open('example.com', 'wnd');这样的代码中爬取你的页面吗？这就是火苗的起源... :-D - Juraj Blahunka
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 - danielnixon
7个回答
179
你可以将JavaScript的onclick事件添加到div中。
<div onclick="location.href='newurl.html';">&nbsp;</div>

编辑：针对新窗口

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>
6
当我这样做时，我的鼠标指针不会像在链接上悬停时那样变成手形。我做错了什么？ - Teddyk
你需要使用window.open。有许多预制脚本可以执行此操作。http://www.javascript-coder.com/window-popup/javascript-window-open.phtml - Joel Etherton
2
如果您将move to be修改为cursor:pointer - 那可以正常工作。 - Teddyk
5
使用 cursor: pointer 替代 cursor: hand。 - bazzilic
1
这对于SEO来说并不是很好。如果超链接是用JavaScript编码的话，搜索引擎将无法看到它。 - Richard Moore
显示剩余2条评论
26
2
那行不通，因为我在 DIV 内有很多内容。我会更新我的原始帖子，使其更具描述性。 - Teddyk
1
@Teddy：给 div 添加 position:relative;，然后给 a 添加 position:absolute; height:100%;，这样整个 div 区域都会变成可点击区域。 - prodigitalson
1
演示：http://jsbin.com/adoka/ - SLaks
1
这不是真的。<a> 是一个内联级元素，只能包含内联级元素。这意味着将 <div> 和/或 <table> 作为 <a> 的子元素是无效的 XHTML。为了解决这个限制，使用内联元素和 CSS 将它们显示为块级元素。请参阅 http://www.cs.sfu.ca/CC/165/common/ref/wdgxhtml10/inline.html 获取内联元素列表。 - Andrew Moore
如果您无法使用上述JavaScript解决方案，则此方法绝对有效！ - b1r3k
显示剩余4条评论
17

您只需要将光标指定为指针而不是手形，因为指针现在是标准设置。以下是示例页面代码：

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

以及示例CSS：

#smallbox {
    cursor: pointer;
}

所以现在使用'onclick'使div成为可点击元素，而您已经使用CSS伪装了手型光标...工作完成，对我来说可行！

https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 - danielnixon
14

这个回答有点晚，但这个问题在搜索结果中出现非常频繁，因此值得认真回答。

基本上，你不应该试图让一个

可点击，而是通过给<a>标签添加display: block CSS属性来使其类似于div一样可点击。

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

7
3
此外，将div元素的光标样式设置为指针，以便整个元素都能使用手指点击。 - Michael Itzoe
链接中的示例也展示了该设置。 - Keith Adler
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 - danielnixon
4

为什么不这样做呢？

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

这应该可以很好地工作，并会提示“可点击项目”鼠标光标更改，而前面提到的解决方案不会做到这一点。

1
这是有效的HTML5 DOCTYPE ... 如果您使用HTML4或XHTML，它将无法验证。 - Ahmad Alfy
你需要将锚点设置为块级元素才能使其起作用。 - davidcondrey
1

另一种选择是使用JavaScript并通过onclick事件进行转发

<div onclick="window.location.href='somewhere...';">...</div>
当我这样做时，我的鼠标指针没有像悬停在链接上时那样变成手形。我做错了什么？ - Teddyk
onclick 实际上并不会将其变成链接，而只是可点击的。您可以使用 CSS 的 cursor 属性来进行相应的更改。 - tDo
https://www.w3.org/WAI/WCAG21/Techniques/failures/F59 - danielnixon
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接