如何链接完整的DIV容器？

Question

我有以下div容器（包括背景图片）。

<div class="haus"></div>

如何将此DIV链接到网址？

Answer 1

使用<a>标记：

<a href="">
    <div class="haus"></div>
</a>

Answer 2

使用a-link标记围绕div

<a href="#">
    <div class="haus"></div>
</a>

---

或者您可以使用onClick

<div onClick="self.location.href='http://www.google.de'" class="haus"></div>

---

或者“实验性”方法是添加div <a>链接并通过jQuery调用它：

<div class="haus">
   <a href="#" style="display:none;">link</a>
</div>

jQuery脚本：

$(".myBox").click(function(){
   window.location=$(this).find("a").attr("href"); 
   return false;
});

Answer 3

非常简单，就像这样：

<a href="htps://www.google.com">
    <div class="haus">
        This is div
    </div>
</a>

工作小提琴：http://jsfiddle.net/xhGud/4/

Answer 4

如果要将下一个元素保持在同一行

，请使用此选项

<a href="htps://www.google.com">
   <div class="haus" style='display:inline-block'>
    text
   </div>
</a>

或只是

<a href="htps://www.google.com">
   <div class="haus">
    text
   </div>
</a>

这对于一些JS工作也很好

<div onClick="self.location.href='http://www.google.com'" class="haus"></div>

Answer 5

我会反过来做。通过使a占用所有div空间。 Live Fiddle

这样，它将在任何doctype下验证。

我个人认为这样更清楚。但是，它有争议。

<强> HTML：

<div class="haus">
    <a href="htps://www.google.com">This is link in the div</a>
</div>

<强> CSS：

.haus
{
    background-color: azure;
    height: 50px;
}

.haus a
{
    display: inline-block;
    width: 100%;
    height: 100%;
}