我有一个 <div> 块，其中包含一些我不想更改的精美视觉内容。我想让它成为一个可点击的链接。
我正在寻找类似 @987654323@ 的东西，但那是有效的 XHTML 1.1。
【问题讨论】：
div 在a 下是完全有效的。
将您的div 包含在锚标记<a href></a> 中就像魅力一样：
<a href="">
<div>anything goes here will turn into a link</div>
</a>
【讨论】：
尚未提及的一个选项是使用 flex。通过将flex: 1 应用于a 标记，它会扩展以适应容器。
div {
height: 100px;
width: 100px;
display: flex;
border: 1px solid;
}
a {
flex: 1;
}<div>
<a href="http://google.co.uk">Link</a>
</div>【讨论】：
最简洁的方法是将 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。
【讨论】：
虽然我不建议在任何情况下这样做，但这里有一些将 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>
【讨论】：
<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-index，只需确保此 z-index 的值高于您希望它“放在”其“顶部”的任何值。
【讨论】：
不确定这是否有效，但它对我有用。
代码：
<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>【讨论】：
来到这里是希望找到比我更好的解决方案，但我不喜欢这里提供的任何解决方案。我想你们中的一些人误解了这个问题。 OP 希望使一个充满内容的 div 表现得像一个链接。这方面的一个例子是 facebook 广告 - 如果你看，它们实际上是正确的标记。
对我来说，禁忌是：javascript（不应该仅仅用于链接，并且非常糟糕的 SEO/可访问性）；无效的 HTML。
本质上是这样的：
<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> 标记内，因此它是一个可点击的链接
【讨论】：
{ position: relative }。
这是 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);
}
}
}
【讨论】：
此选项不需要 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.feature > a，以防“其他所有”部分也包含隐藏在深处的链接吗？
这是一个古老的问题，但我想我会回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单...
一个锚标签是这样工作的 -
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
太好了……
<a href="whatever you want"> <div id="thediv" /> </a>
虽然我不确定这是否有效。如果这就是口头解决方案背后的原因，那么我道歉......
【讨论】：
<div>不包含任何交互式内容（其他<a>元素、<button>元素等），它就是有效的HTML。
a 标记所做的是获取 div 中的所有文本并在其下划线......这可以通过样式，但最佳答案更好。
a #thediv{font-weight:normal;text-decoration:none;} 是你所需要的风格。
为什么不呢？ use <a href="bla"> <div></div> </a> 在 HTML5 中工作正常
【讨论】：
<div><span></span></div> 有效，<span><div></div></span> 无效。您不应该将 display: inline; 类型的项目放入 display: block; 项目中。 <a> 标签是内联框。
<a><div></div></a> 有效且有效，<a><div><a></a></div></a> 无效且无效。
实际上你现在需要包含 JavaScript 代码， 检查this tutorial 这样做。
但是有一个棘手的方法可以使用 CSS 代码来实现这一点 你必须在你的 div 标签内嵌套一个锚标签，并且你必须将这个属性应用到它，
display:block;
当你这样做时，它将使整个宽度区域可点击（但在锚标签的高度内），如果你想覆盖整个 div 区域，你必须将锚标签的高度精确设置为div标签的高度，例如：
height:60px;
这将使整个区域都可以点击，然后您可以将text-indent:-9999px应用于锚标签以实现目标。
这真的很棘手而且很简单，它只是使用 CSS 代码创建的。
【讨论】：
我知道这篇文章很旧，但我只需要解决同样的问题，因为简单地编写一个普通的链接标签并将显示设置为阻止不会使整个 div 在 IE 中可点击。所以解决这个问题比使用 JQuery 要简单得多。
首先让我们了解为什么会发生这种情况：IE 不会让空的 div 可点击它只会使该 div/a 标签内的文本/图像可点击。
解决方案：用背景图像填充 div 并将其隐藏在查看器中。
怎么样？ 你问了很好的问题，现在听好了。 将此背景样式添加到 a 标签
> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"
你有了它，整个 div 现在可以点击了。这对我来说是最好的方法，因为我将它用于我的照片库，让用户单击图像的一半以向左/向右移动，然后放置一个小图像以达到视觉效果。所以对我来说，我还是用左右图像作为背景图像！
【讨论】：
您不能让div 本身成为链接，但可以让<a> 标记充当block，与<div> 具有相同的行为。
a {
display: block;
}
然后你可以设置它的宽度和高度。
【讨论】：
这是最简单的方法。
说，这是我想要点击的div 块：
<div class="inner_headL"></div>
所以放一个href如下：
<a href="#">
<div class="inner_headL"></div>
</a>
只需将div 块视为普通的html 元素并启用通常的href 标记。
它至少适用于 FF。
【讨论】：
这个例子对我有用：
<div style="position: relative; width:191px; height:83px;">
<a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>
【讨论】：
你可以用href标签包围元素，或者你可以使用jquery并使用
$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});
【讨论】：
您可以通过以下方法提供指向您的 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>
【讨论】：
要使同行的答案在 IE 7 及更高版本中工作，需要进行一些调整。
如果元素没有背景色，IE 将不支持 z-index，因此链接不会与包含内容的包含 div 的部分重叠，只会与空白部分重叠。为了解决这个问题，添加了不透明度为 0 的背景。
由于某种原因，在链接方法中使用 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>
【讨论】：
您也可以尝试包装一个锚点，然后将其高度和宽度设置为与其父级相同。这对我来说非常有效。
<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
【讨论】：
我的聪明裤回答：
“对“如何使块级元素成为超链接并在 XHTML 1.1 中进行验证”的回避回答
只需使用 HTML5 DOCTYPE DTD。”
实际上并不适用于 ie7
onclick="location.href='page.html';"
适用于 IE7-9、Chrome、Safari、Firefox，
【讨论】：
我引入了一个变量，因为我的链接中的某些值会根据用户来自的记录而改变。 这适用于测试：
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这也有效：
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
【讨论】：
这对我有用：
<div onclick="location.href='page.html';" style="cursor:pointer;">...</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、body 或其他任何内容添加“js_enabled”类来启用 javascript 时才应用这些样式。
【讨论】：
如果一切都可以这么简单......
#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>
跳出框框思考一下 ;-)
【讨论】：
这是实现您想要的“有效”解决方案。
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
但最有可能您真正想要的是将<a> 标记显示为块级元素。
我不建议使用 JavaScript 来模拟超链接，因为这违背了标记验证的目的，最终是为了提高可访问性（按照适当的语义规则发布格式良好的文档可以最大限度地减少同一文档被不同的人解释的可能性）浏览器）。
最好发布一个不验证但在所有浏览器上都能正常呈现和运行的网页，包括禁用 JavaScript 的网页。此外，使用onclick 不会为屏幕阅读器提供语义信息来确定 div 是否用作链接。
【讨论】：
需要一点 JavaScript。
但是，您的 div 将是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
【讨论】：