使div成为链接

if just everything could be this simple...

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

just think a little outside the box ;-)

这是最简单的方法。

Say, this is the div block I want to make clickable:

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

So put a href as follows:

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

Just consider the div block as a normal html element and enable the usual a href tag.
It works on FF at least.

您可以使用href标签将元素括起来，也可以使用jquery并使用

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

这是BBC网站和《卫报》上使用的最好方法：

我在这里找到了该技术：http : //codepen.io/IschaGast/pen/Qjxpxo

继承人的HTML

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

继承人的CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}

<a href="…" style="cursor: pointer;"><div> … </div></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;
}

这会添加一个不可见的元素（范围），该元素覆盖整个div，并且在z-index上位于整个div的上方，因此当某人单击该div时，该点击实际上会被您不可见的“ span”层拦截，已连接。

注意：如果您已经将z-indexes用于其他元素，只需确保此z-index的值高于您希望其“位于其上”的任何值。

实际上，您目前需要包括​​JavaScript代码，请查看本教程。

但是有一种使用CSS代码来实现此目的的棘手方法，您必须在div标签内嵌套一个定位标签，并​​且必须将此属性应用于该标签，

display:block;

完成此操作后，它将使整个宽度区域都可单击（但要在锚标记的高度之内），如果要覆盖整个div区域，则必须将锚标记的高度精确设置为div标签，例如：

height:60px;

这将使整个区域都可点击，然后您可以申请text-indent:-9999px锚标记以实现目标。

这真的很棘手，很简单，只是使用CSS代码创建的。

这是一个示例：http : //jsfiddle.net/hbirjand/RG8wW/

这个例子对我有用：

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</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使块可点击（通过web designer wall）：

$(document).ready(function(){

    $("#div_link").click(function(){
      window.location=$(this).find("a").attr("href"); return false;
    });

});

然后，您要做的就是将光标样式添加到div中

    #div_link:hover {cursor: pointer;}

对于奖励积分，仅当通过在div或正文中添加“ js_enabled”类启用了javascript时才应用这些样式。

最干净的方法是将jQuery与HTML中引入的数据标签一起使用。使用此解决方案，您可以在所需的每个标签上创建链接。首先使用数据链接标签定义标签（例如div）：

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

现在，您可以根据需要设置div的样式。而且，您还必须为“链接”行为创建样式：

[data-link] {
  cursor: pointer;
}

最后将这个jQuery调用放到页面上：

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

jQuery使用此代码将点击侦听器应用于页面上具有“数据链接”属性的每个标签，然后重定向到数据链接属性中的URL。

为了使对等答案在IE 7及更高版本中有效，需要进行一些调整。

1. 如果元素没有背景色，则IE不会采用z-index，因此该链接不会与包含内容的containig div部分重叠，而不会与空白部分重叠。为了解决这个问题，添加了不透明度0的背景。

2. 由于某些原因，在链接方法中使用跨度时，IE7和各种兼容模式将完全失败。但是，如果给链接本身指定样式，则可以正常工作。

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}

<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

您也可以尝试通过包裹锚点，然后将其高度和宽度与父节点相同来进行尝试。这完全适合我。

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

为什么不？use <a href="bla"> <div></div> </a>在HTML5中正常工作

这是实现所需目标的“有效”解决方案。

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

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

我不建议使用JavaScript模拟超链接，因为这样做会破坏标记验证的目的，而标记验证的最终目的是提高可访问性（按照正确的语义规则发布格式正确的文档，会使同一文档被不同浏览器以不同方式解释的可能性降至最低）。

最好发布一个未经验证但在所有浏览器（包括禁用了JavaScript的浏览器）上正确呈现和运行的网页。此外，使用onclick不会为屏幕阅读器提供确定div用作链接的语义信息。

此选项不需要在最喜欢的答案中使用empty.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/

您不能自己创建div链接，但是可以使<a>标签充当，具有block与相同的行为<div>。

a {
    display: block;
}

然后可以在其上设置宽度和高度。

这是一个古老的问题，但是我想我会回答，因为这里的每个人都有一些疯狂的解决方案。实际上非常非常简单...

定位标记的工作方式如下：

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

......

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

虽然我不确定这是否有效。如果这是口头解决方案背后的原因，那么我表示歉意...