Question

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

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

对我来说，第一种方法似乎更清洁，更直接。

我认为这是许多网络开发人员面临的常见问题，但我不确定是否存在现有的最佳实践解决方案。

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 anchor

中

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

仅当内的您没有其他<a>

否则你可以这样做：

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

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

或简单地说：

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

Answer 2

您的第一种方法符合HTML5。 a-tags可以有孩子，只有更多的链接。

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

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

2 个答案: