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

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


当前回答

这个例子很适合我:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

其他回答

这是实现你想要的东西的“有效”解决方案。

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

但最可能的是,您真正想要的是将<a>标记显示为块级元素。

我不建议使用JavaScript来模拟超链接,因为这违背了标记验证的目的,标记验证的最终目的是提高可访问性(按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档的不同解释)。

最好是发布一个不需要验证,但在所有浏览器(包括禁用JavaScript的浏览器)上都能正常渲染和运行的网页。此外,使用onclick不会为屏幕阅读器提供语义信息,以确定div是作为链接使用的。

只是有链接在块和增强它与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或其他东西来启用时才应用这些样式。

将你的div包含在一个锚标记<a href></a>中:

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

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

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

这个也有用:

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

我自作聪明的回答是:

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

使用HTML5 DOCTYPE DTD即可。”

但ie7并不适用

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

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