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

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


当前回答

虽然我不建议在任何情况下这样做,但下面是一些代码,它将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 id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

为了让同伴的答案在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>

我来这里是希望能找到比我更好的解决办法,但这里提供的办法我一个都不喜欢。我想你们有些人误解了这个问题。OP希望使一个充满内容的div表现得像一个链接。其中一个例子是facebook的广告——如果你仔细观察,你会发现它们实际上是适当的标记。

对我来说,不应该的是:javascript(不应该只是一个链接,非常糟糕的SEO/可访问性);无效的HTML。

本质上是这样的:

Build your panel using normal CSS techniques and valid HTML. Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too). Inside that link, put an empty span tag (<span></span>, not <span /> - thanks @Campey) give the panel position:relative apply the following CSS to the empty span: { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } It will now cover the panel, and as it's inside an <A> tag, it's a clickable link give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link

为什么不呢?使用<a href="bla"> <div></div> </a>在HTML5中工作良好

只是有链接在块和增强它与jquery。对于没有javascript的任何人,它都可以100%优雅地降级。在我看来,用html来做这件事并不是最好的解决方案。 例如:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

然后使用jquery使块可点击(通过网页设计师墙):

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

然后你所要做的就是向div添加游标样式

    #div_link:hover {cursor: pointer;}

为了加分,只有当javascript通过添加'js_enabled'类到div或body或其他东西来启用时才应用这些样式。