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

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


当前回答

我引入了一个变量,因为我的链接中的一些值将根据用户来自的记录而改变。 这适用于测试:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

这个也有用:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

其他回答

这是一个古老的问题,但我想我应该回答它,因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </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包含在一个锚标记<a href></a>中:

    <a href="">
      <div>anything goes here will turn into a link</div>
    </a>

为了让同伴的答案在ie7及以后的版本中工作,它需要做一些调整。

如果元素没有背景色,IE将不支持z-index,因此链接将不会与包含内容的div的部分重叠,只与空白部分重叠。为了解决这个问题,添加了一个不透明度为0的背景。 由于某种原因,当在链接方法中使用span时,IE7和各种兼容模式完全失败。然而,如果链接本身被赋予了样式,它就可以正常工作。

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}
<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<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/所提议