将包含锚定标记的整个div转换为链接 [英] Convert whole div which contains anchor tags into a link

问题描述

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

b $ b

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

以下代码不起作用。但是，这是我的问题的主要想法。

< a href =/ x> < DIV>方框1< p>< a href =/ a> A< / a> < / p为H. < / div>< / a>

解决方案

只要没有交互式内容（例如按钮或其他内容），a元素可能会缠绕整个段落，列表，表格等等甚至整个部分链接）搜索结果&MDASH。 W3C文档

锚点元素可能不包含任何互动内容。这包括其他锚。这也是更严格的规则之一。它不仅违背规范，而且在主要浏览器中完全破坏功能。 Chrome独自解析您的示例以包含四个链接！

您需要预处理语言来更改标记（前端的服务器端语言或JavaScript处理ajax返回数据），或者您只需手动更改HTML。无论哪种方式，最终都需要用span或其他非互动元素将内部锚点切换出去。

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

I want to convert the div into a link. Note that div includes an anchor tag. What is the best way to do it.

Following code doesn't work. But that's the rough idea to my problem.

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

解决方案

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

— W3C Documentation

The anchor element may not contain any interactive content. This includes other anchors. This is one of the more strict rules too. It not only goes against spec, but it completely breaks functionality in major browsers. Chrome alone parses your example to include four links!

You'll need a preprocessing language to alter the markup (server side language or javascript on the front end manipulating ajax return data), or you'll just have to manually change the HTML. Either way, in the end, you'll need to switch that inner anchor out with a span or some other non-interactive element.

这篇关于将包含锚定标记的整个div转换为链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！