javascript - 如何链接一个完整的 DIV 容器？

Question

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

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

如何将此 DIV 链接到 url？

Answer 1

使用<a>标签：

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

Answer 2

div用 a-link 标签包围

<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 空间。现场小提琴

这样，它将在任何文档类型下验证。

我个人认为这样更清楚。但是，它值得商榷。

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%;
}