将 DIV 包裹在 Anchor 标签内或其他答案

【问题标题】：Wrapping DIV inside Anchor tag or otherwise将 DIV 包裹在 Anchor 标签内或其他
【发布时间】：2016-09-05 18:04:15
【问题描述】：

假设我有一个可点击的复杂div 元素结构，它链接到另一个页面，如下所示。这是目前点击时正在实现的事情。单击时（css：活动状态）更改 <a> 标签内的背景颜色并重定向到其他页面。

我想知道这是否符合 HTML5 验证，或者与使用 div 包装它并使用 JavaScript 管理链接重定向和点击时背景颜色更改相比，这是一种最佳实践。

对我来说，第一种方法似乎更加简洁明了。

我相信这是许多 Web 开发人员面临的常见问题，但我不确定是否有针对此问题的现有最佳实践解决方案。

1) 保持这样

<a href="page1.html">
    <div>
        <!-- complex layout -->
    </div>
</a>

2) 在点击事件期间省略<a> 标记并管理背景颜色并使用JavaScript 重定向

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

【问题讨论】：

你可以做window.location="some_Website_link"on onClick
除了纯 HTML5 有效性之外，出于性能和兼容性的原因，我每天都会选择仅使用 CSS 而非 Javascript（以防有人禁用了 Javascript 或使用了不支持它的系统））。 Javascript 应该处理功能，而 CSS 应该处理视觉设计。您的源代码将更具可读性，这将主要使您受益。此外，抓取工具将能够分析您的页面中的超链接。
(•_•) @TheThirdMan 引用您的评论 "I'd go for CSS-only over Javascript any day" ...什么？ "Also, crawlers will be able to analyze your page for hyperlinks" 嗯？您能否举一个例子，仅使用 CSS 可以将元素转换为链接？
@Roko：我的措辞很糟糕——我的意思是使用纯 CSS 来改变元素的外观，而不是让 javascript 基于使用 a 标签的基本 HTML 构造来改变元素的外观。 CSS 和 JS 都假设了一个分别构建的标记来让它们工作，所以我在之前的描述中省略了它。

标签： javascript html css

【解决方案1】：

HTML5，您可以将DIV 包裹在A anchor 中

<a href="page1.html">
    <div>
        <!-- complex layout - WITHOUT ANCHORS OR BUTTONS -->
    </div>
</a>

仅当在 内没有另一个<a> 或<button> 等表单操作元素。

否则你可以这样做：

<div id="#redirectLink" data-link="page1.html">
    <!-- complex layout -->
</div>

<script>
document.querySelectorAll("[data-link]").forEach( el =>  {
   el.addEventListener("click", () => window.location.href = el.dataset.link);
});
</script>

或者简单地说：

<div id="#redirectLink" onclick="window.location.href='page1.html';">
    <!-- complex layout -->
</div>

但是内联 JavaScript 是糟糕的设计，因为难以维护和调试，所以更喜欢将它放在脚本文件中。

【讨论】：

【解决方案2】：

您的第一种方法符合 HTML5。 a-tags 可以有子标签，但不能有更多链接。

Is it legal to have children of an anchor tag (<a>) in HTML?

【讨论】：