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

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

#1楼

这是最简单的方法。

说，这是我想要点击的div块：

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

所以把href如下：

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

只需将div块视为普通的html元素，并启用通常的href标记。
它至少适用于FF。

#2楼

我输入了一个变量，因为链接中的某些值会根据用户来自哪个记录而改变。 这适用于测试：

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

这也有效：

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

#3楼

我的聪明裤子回答：

“Evasive回答：”如何使块级元素成为超链接并在XHTML 1.1中进行验证“

只需使用HTML5 DOCTYPE DTD。“

ie7实际上并不适用

onclick="location.href='page.html';"

适用于IE7-9，Chrome，Safari，Firefox，

#4楼

您也可以尝试包装锚点，然后将其高度和宽度调整为与其父级相同。 这对我很有用。

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

#5楼

您可以通过以下方法为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>

#6楼

如果一切都可以这么简单......

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

只是想一下盒子外面;-)

#7楼

您可以使用href标记环绕元素，也可以使用jquery和use

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

#8楼

最简洁的方法是将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将单击侦听器应用于页面上具有“data-link”属性的每个标记，并重定向到data-link属性中的URL。

#9楼

这个例子对我有用：

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

#10楼

此选项不需要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/所提议的那样

#11楼

实际上，您现在需要包含JavaScript代码，请查看本教程 。

但是使用CSS代码实现这一点有一个棘手的方法，你必须在div标签中嵌套一个锚标签，你必须将此属性应用于它，

display:block;

当你完成它时，它将使整个宽度区域可以点击（但在锚标记的高度内），如果你想要覆盖整个div区域，你必须将锚标记的高度精确地设置为高度。 div标签，例如：

height:60px;

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

这非常棘手和简单，它只是使用CSS代码创建的。

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

#12楼

为什么不？ use <a href="bla"> <div></div> </a>可以在HTML5中正常使用

#13楼

这篇文章是老我知道，但我只是必须解决相同的问题，因为只是编写一个普通的链接标记与显示设置为块不会使整个div在IE中可点击。 所以解决这个问题比使用JQuery简单得多。

首先让我们理解为什么会发生这种情况：IE不会使空div可点击它只会使div / a标签内的文本/图像可点击。

解决方案：使用bakground图像填充div并将其隐藏在查看器中。

怎么样？ 你问好问题，现在听。 将此背景样式添加到标记

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

你有它，整个div现在可以点击。 这对我来说是最好的方式，因为我将它用于我的照片库，让用户在图像的一半上进行左/右移动，然后放置一个小图像以获得视觉效果。 所以对我来说，无论如何我都使用左右图像作为背景图像！

#14楼

来到这里是为了找到一个更好的解决方案，但我不喜欢这里提供的任何一个。 我想你们有些人误解了这个问题。 OP希望使一个充满内容的div表现得像一个链接。 其中一个例子就是facebook广告 - 如果你看，它们实际上是正确的标记。

对我来说，no-nos是：javascript（不仅仅需要一个链接，而且非常糟糕的搜索引擎优化/可访问性）; HTML无效。

本质上是这样的：

• 使用常规CSS技术和有效的HTML构建面板。
• 如果用户点击面板，那么在某处放置一个您想要成为默认链接的链接（您也可以有其他链接）。
• 在该链接中，放置一个空的span标记（ <span></span> ，而不是<span /> - 感谢@Campey）
• 给小组的位置：相对

• 将以下CSS应用于空跨度：

   { position:absolute; width:100%; height:100%; top:0; left: 0; z-index: 1; /* fixes overlap error in IE7/8, make sure you have an empty gif */ background-image: url('empty.gif'); } 

  它现在将覆盖面板，因为它位于<A>标签内，它是一个可点击的链接

• 给出面板位置内的任何其他链接：relative和一个合适的z-index（> 1），将它们放在默认的span链接前面

#15楼

这是在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);
      }
    }
}

#16楼

只需在块中使用链接并使用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设计器墙 ）：

$(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时才应用这些样式。

#17楼

不确定这是否有效，但它对我有用。

代码 ：

 <div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'> <p style='display:inline;color:#ffffff;float:left;'> Whatever </p> <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a> </div> 

#18楼

这对我有用：

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索引你的整个DIV 以上 ，所以当有人点击该分区，点击基本上是由你看不见的“跨度”层，截获这已连接。

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

#19楼

<a href="…" style="cursor: pointer;"><div> … </div></a>

#20楼

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

锚标签的工作原理如下 -

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

SOOO ...

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

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

#21楼

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

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

#22楼

您不能将div本身设为链接，但您可以将<a>标记用作block ，与<div>具有相同的行为。

a {
    display: block;
}

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

#23楼

这是实现您想要的“有效”解决方案。

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

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

我不建议使用JavaScript来模拟超链接，因为这会破坏标记验证的目的，这最终会促进可访问性（按照适当的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档进行不同解释的可能性）。

, including ones with JavaScript disabled. 最好发布一个不验证的网页，但 ，包括禁用JavaScript的 。 此外，使用onclick不为屏幕阅读器提供语义信息以确定div作为链接起作用。

#24楼

为了让这个回答的答案在IE 7中正常工作，需要进行一些调整。

1. 如果元素没有背景颜色，IE将​​不会尊重z-index，因此链接不会与包含内容的containsig div的部分重叠，只会与空白部分重叠。 要解决此问题，会添加不透明度为0的背景。

2. 出于某种原因，在链接方法中使用span时，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>

#25楼

这项工作对我来说：

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

#26楼

虽然我不建议在任何情况下执行此操作，但这里有一些代码将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>