我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
这是实现你想要的东西的“有效”解决方案。
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
但最可能的是,您真正想要的是将<a>标记显示为块级元素。
我不建议使用JavaScript来模拟超链接,因为这违背了标记验证的目的,标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。
最好是发布一个不需要验证,但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外,使用onclick不会为屏幕阅读器提供语义信息,以确定div是作为链接使用的。
其他回答
这个例子很适合我:
<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>
这是一个古老的问题,但我想我应该回答它,因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……
锚标记是这样工作的-
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
Sooo ...
<a href="whatever you want"> <div id="thediv" /> </a>
虽然我不确定这是否成立。如果这就是口头解决方案背后的原因,那么我道歉……
这个选项不需要一个空的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/所提议
需要一点javascript。 但是,你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
这招对我很管用:
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索引的值高于你想让它“放在”上面的任何值。