Question

我这里有一点问题。我有一个div h1, h2 and p。我想把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; }

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

4 个答案: