Javascript 将div转换为link的最佳实践是什么？

我这里有个小问题。我有一个

div

和

h1、h2和p

。我想把div变成一个链接，但我不能把一个

包裹在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>

---

假设您的原始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>

最后，确保在CSS中添加

cursor

属性，以便可以明显地单击div：

.link { cursor: pointer; }

---

您不需要任何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>

某物
别的
另一件事

div{
位置：相对位置；
}
分区>a{
显示：块；
位置：绝对位置；
排名：0；
右：0；
底部：0；
左：0；
z指数：2；
}

---

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

为了详细说明Rory的建议，我认为如果用户没有启用javascript并用于搜索引擎索引，在div中插入实际链接可能更安全

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

还有CSS

.link { cursor:pointer; }   

---

在html5中，只允许使用CSS，您不需要任何JS即可完成此任务。不要使事情过于复杂^^为什么不使用

href

而不是

数据url

？但是我应该将h1、h2、p更改为跨距吗？或者只使用javascript选择div？@Chanckjh那么就不需要了。@JanDvorak，因为

div

元素没有

href

属性。添加一个链接将使页面无效。只需我的两分钱：请注意，“链接”对搜索引擎和关闭javascript（可访问性！）的浏览器/用户都不可见。所以我通常在div中添加一个真正的链接（a href），偶尔通过css使其不可见。既然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>

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

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

.link { cursor:pointer; }