如何链接完整的 DIV 容器

How to link a complete DIV container?

本文关键字：DIV 容器 何链接 链接      更新时间：2023-09-26

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

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

如何将此 DIV 链接到 URL？

使用 <a> 标签： 

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

很简单，像这样：

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

工作小提琴 ： http://jsfiddle.net/xhGud/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>

用 a 链接标签包围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;
});

我会反过来做。 通过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%;
}
相关文章：