我有一个<div>块与一些花哨的视觉内容,我不想改变。我想让它成为一个可点击的链接。

我正在寻找类似于<a href="…"><div>…</div></a>,但这是有效的XHTML 1.1。


当前回答

我自作聪明的回答是:

对“如何使块级元素成为超链接并在XHTML 1.1中验证”的回避回答

使用HTML5 DOCTYPE DTD即可。”

但ie7并不适用

onclick = " location.href =“page.html”;“

适用于IE7-9, Chrome, Safari, Firefox,

其他回答

这篇文章是旧的,我知道,但我不得不解决同样的问题,因为简单地写一个普通的链接标签,显示设置为块不能使整个div在IE中可点击。所以解决这个问题要比使用JQuery简单得多。

首先让我们理解为什么会发生这种情况:IE不会使一个空的div可点击,它只使该div/a标签内的文本/图像可点击。

解决方案:用烘焙图像填充div,并隐藏它不让查看器看到。

如何? 你问得好,现在听好了。 将此背景样式添加到a标签

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

现在整个div都可以点击了。这对我来说是最好的方式,因为我在我的图片库中使用它,让用户点击图像的一半左右移动,然后放置一个小图像,只是为了视觉效果。所以对我来说,我使用左右图像作为背景图像!

这是最简单的方法。

比如说,这是我想要的可点击的div块:

<div class="inner_headL"></div>

所以输入href,如下所示:

<a href="#">
 <div class="inner_headL"></div>
</a>

只需将div块视为普通的html元素,并启用通常的a href标记。 至少在FF上是有效的。

苏联的回答对我来说是不够的。我必须使用

a { display: inline-flex; }

要删除基线工件,当只使用a。

虽然我不建议在任何情况下这样做,但下面是一些代码,它将DIV转换为链接(注意:本例使用jQuery,为了简单起见,删除了某些标记):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

不确定这是否有效,但它为我工作。

代码:

< div风格= '位置:相对;background - color: # 000000;宽度:600 px;高度:30 px;边界:固体;“> <p style='display:inline;color:#ffffff;float:left; <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a> . < / div >