javascript - 将 div 制作成链接的最佳做法是什么？

Question

我这里有个小问题。我有一个 div与 h1, h2 and p .我想把 div 变成一个链接，但我不能只包装一个 <a>围绕一个 div 或 h1、h2、p。这不是正确的方法，但我应该怎么做才能使整个 div 成为一个链接？我应该把每个元素都变成 span 吗？ ？这将需要更多的工作

<a href="#" class="link">
    <span class="div">
        <span class="h1"></span>
        <span class="h2"></span>
        <span class="p"></span>
    </span>
</a>

或者我应该使用 javascript:

$('.link').click(function(){
   document.location.href='#';
})

Answer 1

您不需要任何 JS 或 jQuery 来执行此操作。另一种方法是做这样的事情:

<div>
    <a href="#"></a>
    <h1>Something</h1>
    <h2>Something else</h2>
    <p>Another something</p>
</div>

<style type="text/css">
    div {
        position: relative;
    }

    div > a {
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 2;
    }
</style>

当然，更改 CSS 选择器，使其只影响您希望它们影响的任何内容。这样做的好处当然是如果用户没有启用JS，它仍然可以完全正常工作，而且对SEO更好。