Question

＆＃13;

<div style="height: 100px; border: solid; border-width: 2px; border-color: #000">
Box 1
<p><a href="/a">A</a></p>
</div>

＆＃13;

我想将div转换为链接。请注意，div包含一个锚标记。什么是最好的方法。

以下代码不起作用。但这对我的问题来说是个粗略的想法。

＆＃13;

<a href="/x">
  <div>
    Box 1
    <p><a href="/a">A</a>
    </p>
  </div>
</a>

＆＃13;

Answer 1

只要内部没有交互式内容（例如按钮或其他链接），a元素可以包裹整个段落，列表，表格等，甚至整个部分。

- W3C Documentation

anchor element可能不包含任何interactive content。这包括其他锚点。这也是更严格的规则之一。它不仅违反规范，而且完全破坏了主流浏览器的功能。 Chrome单独解析您的示例以包含四个链接！

您需要一种预处理语言来改变标记（服务器端语言或前端的javascript操纵ajax返回数据），或者您只需手动更改HTML即可。无论哪种方式，最后，您都需要使用span或其他非交互元素切换内部锚点。

Answer 2

我找到了一个有用的jsfiddle，它使用<a class='default-link' href='javascript:void(0)' onclick='window.location = "http://www.google.com"'</a>作为实际的<div>链接，然后在其中有独立的链接。

Click here to see the jsfiddle

Answer 3

您可以简单地添加display: block;并使用您需要的高度来完成任务！

<强> DEMO

或者你可以使用内联javascript

＆＃13;

<div style="height: 100px; border: solid; border-width: 2px; border-color: #000; cursor: pointer;" onclick="window.location='/a'">
  Box 1
  <p><a href="/a">A</a>
  </p>
</div>

＆＃13;

Answer 4

以下代码适用于我。但即使使用HTML5，我也不知道它是有效的。

<a style="display:block" href="/a">
    <div style="border: solid; border-width: 1px; border-color: #FFF">
        <div>
            <h3>Heading</h3>
        </div>

        <a href="/b" target="_blank">B</a>
        <a href="/c" target="_blank">C</a>
     </div>
</a>

将包含锚标记的整个div转换为链接

4 个答案: