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

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


当前回答

你可以通过以下方法给你的div一个链接:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

其他回答

需要一点javascript。 但是,你的div是可点击的。

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

虽然我不建议在任何情况下这样做,但下面是一些代码,它将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块:

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

所以输入href,如下所示:

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

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

还有一个没有提到的选项是使用flex。通过对a标记应用flex: 1,它将展开以适应容器。

div { 身高:100 px; 宽度:100 px; 显示:flex; 边框:1px实体; } 一个{ flex: 1; } < div > 链接< a href = " http://google.co.uk " > < / > < / 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或其他东西来启用时才应用这些样式。