我有一个<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一个链接:

<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>

这是最简单的方法。

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

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

所以输入href,如下所示:

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

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

这个选项不需要一个空的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/所提议

如果你可以使用bootstrap,一个简单的解决方案是使用bootstrap .stretch -link。

https://getbootstrap.com/docs/4.3/utilities/stretched-link/

示例代码

<div class="card" style="width: 18rem;">
  <img src="..." class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card with stretched link</h5>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary stretched-link">Go somewhere</a>
  </div>
</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 >