将DIV包装在Anchor标签内或其他位置

Question

假设我有一个可点击的复杂div元素结构,它链接到另一个页面,如下所示.这是目前正在点击的事情.单击(css:活动状态)更改<a>标记内的背景颜色并重定向到其他页面.

我想知道这是否符合HTML5验证或者考虑作为最佳实践,div与使用JavaScript 包装并使用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>

Answer 1

HTML5,你可以DIV在一个锚内包装A

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

只有在<!-- complex layout -->你内心没有另一个<a>

否则你可以这样做:

<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>