把一个div变成一个链接

需要一点javascript。 但是，你的div将是可点击的

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

您不能使div本身成为一个链接，但您可以使<a>标记充当block，与<div>具有相同的行为。

a {
display: block;
}

然后你可以设置它的宽度和高度。

这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是，您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接，因为这违背了标记验证的目的，标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不验证的网页，但是在所有浏览器上都能正常显示和运行，包括禁用JavaScript的网页。此外，使用onclick不会为屏幕阅读器提供语义信息，以确定div是作为链接使用的。

虽然我不建议在任何情况下这样做，但下面是一些代码，它将DIV转换为链接(注意:本例使用jQuery，为了简单起见，删除了某些标记):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">


$(document).ready(function() {
$("div[href]").click(function () {
window.location = $(this).attr("href");
});
});


</script>
<div href="http://www.google.com">
My Div Link
</div>

如果一切都能这么简单……

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}


#logo a {padding-top:48px; display:block;}






<div id="logo"><a href="../../index.html"></a></div>

只要跳出框框思考一下;-)

这篇文章是旧的，我知道，但我不得不解决同样的问题，因为简单地写一个普通的链接标签，显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。

首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击，它只使该div/a标签内的文本/图像可点击。

解决方案:用烘焙图像填充div，并隐藏它不让查看器看到。

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

现在整个div都可以点击了。这对我来说是最好的方式，因为我在我的图片库中使用它，让用户点击图像的一半左右移动，然后放置一个小图像，只是为了视觉效果。所以对我来说，我使用左右图像作为背景图像!

我来这里是希望能找到比我更好的解决办法，但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。OP希望使一个充满内容的div表现得像一个链接。其中一个例子是facebook的广告——如果你仔细观察，你会发现它们实际上是适当的标记。

对我来说，不应该的是:javascript(不应该只是一个链接，非常糟糕的SEO/可访问性);无效的HTML。

本质上是这样的:

• 使用正常的CSS技术和有效的HTML构建面板。
• 在那里的某个地方放一个链接，如果用户点击面板，你想要作为默认链接(你也可以有其他链接)。
• 在这个链接里面，放一个空的span标签(<span></span>，而不是<span /> -谢谢@Campey)
• 给出面板位置:相对

• 对空span应用以下CSS:

  {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  
  
  z-index: 1;
  
  
  /* fixes overlap error in IE7/8,
  make sure you have an empty gif */
  background-image: url('empty.gif');
  }
  

  现在它将覆盖面板，因为它在<A>标记中，它是一个可点击的链接

• 给出面板内的任何其他链接:相对位置和一个合适的z-index(>1)，将它们放在默认span链接的前面

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

然后使用jquery使块可点击(通过网页设计师墙):

$(document).ready(function(){


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


});

然后你所要做的就是向div添加游标样式

    #div_link:hover {cursor: pointer;}

为了加分，只有当javascript通过添加'js_enabled'类到div或body或其他东西来启用时才应用这些样式。

不确定这是否有效，但它为我工作。

代码:

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
<p style='display:inline;color:#ffffff;float:left;'> Whatever </p>
<a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>

这是一个古老的问题，但我想我应该回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

呃呃……

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否成立。如果这就是口头解决方案背后的原因，那么我道歉……

为了让同伴的答案在ie7及以后的版本中工作，它需要做一些调整。

1. 如果元素没有背景色，IE将不支持z-index，因此链接将不会与包含内容的div的部分重叠，只与空白部分重叠。为了解决这个问题，添加了一个不透明度为0的背景。

2. 由于某种原因，当在链接方法中使用span时，IE7和各种兼容模式完全失败。然而，如果链接本身被赋予了样式，它就可以正常工作。

.blockLink
{
position:absolute;
top:0;
left: 0;
width:100%;
height:100%;
z-index: 1;
background-color:#ffffff;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity:0;
}

<div style="position:relative">
<some content>
<a href="somepage" class="blockLink" />
<div>

这对我来说很有用:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

这是最简单的方法。

比如说，这是div块，我想让它可点击:

<div class="inner_headL"></div>

所以输入href，如下所示:

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

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

这个也有用:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div>

我自作聪明的回答是:

对“如何使块级元素成为超链接并在XHTML 1.1中验证”的回避回答

使用HTML5 DOCTYPE DTD即可。”

但ie7并不适用

# EYZ0

适用于IE7-9, Chrome, Safari, Firefox，

您还可以尝试包装一个锚，然后将其高度和宽度与其父相同。这对我来说非常合适。

<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

你可以通过以下方法给你的div一个链接:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
cursor:pointer;
width:200px;
height:200px;
background-color:#FF0000;
color:#fff;
text-align:center;
font:13px/17px Arial, Helvetica, sans-serif;
}
</style>

你可以使用href标签环绕元素，或者你可以使用jquery和使用

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

最简洁的方法是使用jQuery和HTML中引入的数据标记。使用这个解决方案，您可以在每个标签上创建一个链接。首先用data-link标签定义标签(例如div):

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

现在，您可以随意设置div的样式。你还必须为类似“link”的行为创建样式:

[data-link] {
cursor: pointer;
}

最后把jQuery调用放到页面上:

$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});

jQuery通过这段代码对页面上具有“data-link”属性的每个标记应用一个点击监听器，并重定向到数据链接属性中的URL。

这个例子很适合我:

<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

这个选项不需要一个空的gif，就像被点赞最多的答案一样:

HTML:

 <div class="feature">
<a href="http://www.example.com"></a>
</div>

CSS:

 div.feature {
position: relative;
}


div.feature a {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
text-decoration: none; /* No underlines on the link */
z-index: 10; /* Places the link above everything else in the div */
background-color: #FFF; /* Fix to make div clickable in IE */
opacity: 0; /* Fix to make div clickable in IE */
filter: alpha(opacity=1); /* Fix to make div clickable in IE */
}

正如在http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/中提出的

但有一个棘手的方法来实现这个使用CSS代码 你必须在你的div标签内嵌套一个锚标记，你必须应用这个属性，

display:block;

当你这样做了，它将使整个宽度区域可点击(但在锚标签的高度内)，如果你想覆盖整个div区域，你必须将锚标签的高度设置为div标签的高度，例如:

height:60px;

这将使整个区域可点击，然后你可以应用text-indent:-9999px锚标签来实现目标。

这是非常棘手和简单的，它只是用CSS代码创建的。

这是例子: http://jsfiddle.net/hbirjand/RG8wW/

为什么不呢?use <a href="bla"> <div></div> </a>在HTML5中工作良好

这是BBC网站和《卫报》上使用的最好的表达方式:

这是HTML

<div class="highlight block-link">
<h2>I am an example header</h2>
<p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>


</div>

这里是CSS

/**
* Block Link
*
* A Faux block-level link. Used for when you need a block-level link with
* clickable areas within it as directly nesting a tags breaks things.
*/




.block-link {
position: relative;
}


.block-link a {
position: relative;
z-index: 1;
}


.block-link .block-link__overlay-link {
position: static;
&:before {
bottom: 0;
content: "";
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
white-space: nowrap;
z-index: 0;
}
&:hover,
&:focus {
&:before {
background: rgba(255,255,0, .2);
}
}
}

这招对我很管用:

HTML:

<div>


WHATEVER YOU WANT


<a href="YOUR LINK HERE">
<span class="span-link"></span>
</a>


</div>

CSS:

.span-link {
position:absolute;
width:100%;
height:100%;
top:0;
left: 0;
z-index: 9999;
}

这将添加一个不可见的元素(span)，它覆盖了整个div，并且在z-index上是以上您的整个div，因此当有人单击该div时，单击基本上被您的不可见的“span”层拦截，它是链接的。

注意:如果你已经对其他元素使用了z索引，只要确保这个z索引的值高于你想让它“放在”上面的任何值。

<a href="…" style="cursor: pointer;"><div> … </div></a>

还有一个没有提到的选项是使用flex。通过将flex: 1应用于a标记，它将展开以适应容器。

div {
height: 100px;
width: 100px;
display: flex;
border: 1px solid;
}


a {
flex: 1;
}

<div>
<a href="http://google.co.uk">Link</a>
</div>

将div包含在<a href></a>锚定标签中就像魅力一样:

    <a href="">
<div>anything goes here will turn into a link</div>
</a>

如果可以使用bootstrap，一个简单的解决方案是使用bootstrap .stretched-link。

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

示例代码

<div class="card" style="width: 18rem;">
<img src="..." class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title">Card with stretched link</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
<a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
</div>
</div>