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

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


当前回答

这招对我很管用:

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索引的值高于你想让它“放在”上面的任何值。

其他回答

这是一个古老的问题,但我想我应该回答它,因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单……

锚标记是这样工作的-

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

虽然我不确定这是否成立。如果这就是口头解决方案背后的原因,那么我道歉……

这招对我很管用:

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索引的值高于你想让它“放在”上面的任何值。

如果一切都能这么简单……

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

只要跳出框框思考一下;-)

这对我来说很有用:

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

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

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