我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
苏联的回答对我来说是不够的。我必须使用
a { display: inline-flex; }
要删除基线工件,当只使用a。
其他回答
这篇文章是旧的,我知道,但我不得不解决同样的问题,因为简单地写一个普通的链接标签,显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。
首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击,它只使该div/a标签内的文本/图像可点击。
解决方案:用烘焙图像填充div,并隐藏它不让查看器看到。
如何? 你问得好,现在听好了。 将此背景样式添加到a标签
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
现在整个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 onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这个也有用:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</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>
这个例子很适合我:
<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>