我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。
我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。
当前回答
这个选项不需要一个空的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包含在一个锚标记<a href></a>中:
<a href="">
<div>anything goes here will turn into a link</div>
</a>
最简洁的方法是使用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 onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这个也有用:
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
这篇文章是旧的,我知道,但我不得不解决同样的问题,因为简单地写一个普通的链接标签,显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。
首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击,它只使该div/a标签内的文本/图像可点击。
解决方案:用烘焙图像填充div,并隐藏它不让查看器看到。
如何? 你问得好,现在听好了。 将此背景样式添加到a标签
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
现在整个div都可以点击了。这对我来说是最好的方式,因为我在我的图片库中使用它,让用户点击图像的一半左右移动,然后放置一个小图像,只是为了视觉效果。所以对我来说,我使用左右图像作为背景图像!
这个例子很适合我:
<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>