the*_*eer 724
来到这里是为了找到一个更好的解决方案,但我不喜欢这里提供的任何一个.我想你们有些人误解了这个问题.OP希望使一个充满内容的div表现得像一个链接.其中一个例子就是facebook广告 - 如果你看,它们实际上是正确的标记.
对我来说,no-nos是:javascript(不仅仅需要一个链接,而且非常糟糕的SEO /可访问性); HTML无效.
本质上是这样的:
<span></span>不是<span />- 谢谢@Campey)将以下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>标签内,它是一个可点击的链接
Sov*_*iut 249
你不能自己创建div一个链接,但是你可以让一个<a>标签充当a block,与之相同的行为<div>.
a {
display: block;
}
然后,您可以在其上设置宽度和高度.
Ziz*_*o47 68
这是一个古老的问题,但我想我会回答它,因为这里的每个人都有一些疯狂的解决方案.它实际上非常简单......
锚标签的工作原理如下 -
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
SOOO ...
<a href="whatever you want"> <div id="thediv" /> </a>
虽然我不确定这是否有效.如果这是口语解决方案背后的原因,那么我道歉......
jjn*_*guy 57
需要一点点javascript.但是,你div可以点击.
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
Mag*_*Tun 37
此选项不需要empty.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/所提议的那样
Cal*_*vin 23
这是实现您想要的"有效"解决方案.
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
但最有可能的是你真正想要的是将<a>标签显示为块级元素.
我不建议使用JavaScript来模拟超链接,因为这会破坏标记验证的目的,这最终会促进可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档进行不同解释的可能性).
最好发布一个不验证的网页,但在所有浏览器上正确呈现和运行,包括禁用JavaScript的浏览器.此外,使用onclick不为屏幕阅读器提供语义信息以确定div作为链接起作用.
小智 13
不确定这是否有效,但它对我有用.
代码 :
<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>Erh*_*obl 13
最简洁的方法是将jQuery与HTML中引入的数据标签一起使用.使用此解决方案,您可以在所需的每个标记上创建链接.首先使用数据链接标记定义标记(例如div):
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
现在您可以根据需要设置div的样式.而且你还必须创建"链接"相似行为的风格:
[data-link] {
cursor: pointer;
}
最后把这个jQuery调用放到页面上:
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
使用此代码,jQuery将单击侦听器应用于页面上具有"data-link"属性的每个标记,并重定向到data-link属性中的URL.
为了让这个回答的答案在IE 7中正常工作,需要进行一些调整.
如果元素没有背景颜色,IE将不会尊重z-index,因此链接不会与包含内容的containsig div的部分重叠,只会与空白部分重叠.要解决此问题,会添加不透明度为0的背景.
出于某种原因,在链接方法中使用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>
小智 8
您也可以尝试包装锚点,然后将其高度和宽度调整为与其父级相同.这对我很有用.
<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
没有提到的一个选项是使用 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>小智 6
这对我有用：
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;
}
这会添加一个不可见的元素（跨度），它覆盖了整个 div，并且位于z 索引上的整个 div之上，因此当有人单击该 div 时，该单击基本上会被不可见的“跨度”层拦截，该层已连接。
注意：如果您已经对其他元素使用 z 索引，只需确保此 z 索引的值高于您希望其“位于顶部”的任何值。