把一个div变成一个链接

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

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

当前回答

这是最简单的方法。

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

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

所以输入href，如下所示:

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

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

其他回答

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

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

您还可以尝试包装一个锚，然后将其高度和宽度与其父相同。这对我来说非常合适。

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

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

这个例子很适合我:

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

这招对我很管用:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

这将添加一个不可见的元素(span)，它覆盖了整个div，并且在z-index上位于整个div的上方，因此当有人点击该div时，点击基本上会被链接的不可见的“span”层拦截。

注意:如果你已经对其他元素使用了z索引，只要确保这个z索引的值高于你想让它“放在”上面的任何值。

推荐文章