将div变成链接的最佳做法是什么？

Question

我这里有一点问题。 我有一个带有h1, h2 and p的div 。 我想把div变成一个链接，但我不能只在div或h1，h2，p周围包含一个<a> 。 这不是正确的方法，但我该怎么做才能将整个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更好。

Answer 2

假设您的原始HTML看起来如下所示，您应该添加一个data参数，其中包含单击div时要遵循的链接：

<div class="link" data-url="http://www.google.com">
    <span class="div">
        <span class="h1"></span>
        <span class="h2"></span>
        <span class="p"></span>
    </span>
</div>

然后你可以将一个click处理程序附加到div ：

$('.link').click(function() {
    window.location.assign($(this).data('url'));
});

最后，确保在CSS中添加cursor属性，这样很明显div是可点击的：

.link { cursor: pointer; }

Answer 3

<div onclick="window.location = 'http://www.abc.com/';" style="cursor:pointer;">

</div>

Answer 4

要详细说明Rory提出的建议，我认为可能需要在你的div中包含一个实际的链接，因为用户没有启用javascript和搜索引擎索引。

<div class="link">
  <h1><a href="http://www.google.com">Heading One</a></h1>
  <h2>Heading Two</h2>
  <p>Paragraph</p>
</div>

然后搜索h1链接并将其用作网址

$('.link').on('click', function() {
    window.location = $(this).find('h1 a').attr('href');
});

和CSS

.link { cursor:pointer; }