我有一个<div>块与一些花哨的视觉内容，我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>，但这是有效的XHTML 1.1。
当前回答
这个例子很适合我:
<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>
其他回答
需要一点javascript。 但是，你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></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/所提议
我引入了一个变量，因为我的链接中的一些值将根据用户来自的记录而改变。 这适用于测试:
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这个也有用:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
<a href="…" style="cursor: pointer;"><div> … </div></a>
如果一切都能这么简单……
#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>
只要跳出框框思考一下;-)
