Html 将一个div变成一个链接
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/796087/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Make a div into a link
提问by EE.
I have a <div>block with some fancy visual content that I don't want to change. I want to make it a clickable link.
我有一个<div>带有一些我不想更改的精美视觉内容的块。我想让它成为一个可点击的链接。
I'm looking for something like <a href="…"><div> … </div></a>, but that is valid XHTML 1.1.
我正在寻找类似的东西<a href="…"><div> … </div></a>，但它是有效的 XHTML 1.1。
回答by thepeer
Came here in the hope of finding a better solution that mine, but I don't like any of the ones on offer here. I think some of you have misunderstood the question. The OP wants to make a div full of content behave like a link. One example of this would be facebook ads - if you look, they're actually proper markup.
来到这里是希望找到一个更好的解决方案，但我不喜欢这里提供的任何解决方案。我想你们中的一些人误解了这个问题。OP 想让一个充满内容的 div 表现得像一个链接。这方面的一个例子是 facebook 广告 - 如果你看，它们实际上是适当的标记。
For me the no-nos are: javascript (shouldn't be needed just for a link, and very bad SEO/accessibility); invalid HTML.
对我来说，禁忌是：javascript（不应该只需要链接，并且非常糟糕的搜索引擎优化/可访问性）；无效的 HTML。
In essence it's this:
本质上是这样的：
- Build your panel using normal CSS techniques and valid HTML.
- Somewhere in there put a link that you want to be the default link if the user clicks on the panel (you can have other links too).
- Inside that link, put an empty span tag (
<span></span>, not<span />- thanks @Campey) - give the panel position:relative
apply the following CSS to the empty span:
{ 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'); }It will now cover the panel, and as it's inside an
<A>tag, it's a clickable link- give any other links inside the panel position:relative and a suitable z-index (>1) to bring them in front of the default span link
- 使用普通的 CSS 技术和有效的 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 内提供任何其他链接和合适的 z-index (>1) 以将它们置于默认跨度链接的前面
回答by Soviut
You can't make the diva link itself, but you can make an <a>tag act as a block, the same behaviour a <div>has.
你不能让diva 链接本身，但你可以让<a>标签充当 a block，与 a<div>具有相同的行为。
a {
display: block;
}
You can then set the width and height on it.
然后，您可以在其上设置宽度和高度。
回答by Zizo47
This is an ancient question, but I thought I'd answer it since everyone here has some crazy solutions. It's actually very very simple...
这是一个古老的问题，但我想我会回答它，因为这里的每个人都有一些疯狂的解决方案。其实非常非常简单...
An anchor tag works like this -
锚标签的工作原理是这样的 -
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
Sooo...
呜……
<a href="whatever you want"> <div id="thediv" /> </a>
Although I'm not sure if this is valid. If that's the reasoning behind spoken solutions, then I apologise...
虽然我不确定这是否有效。如果这是口头解决方案背后的原因，那么我道歉......
回答by jjnguy
Requires a little javascript.
But, your divwould be clickable.
需要一点javascript。但是，您div将可以点击。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>
回答by MagTun
This option doesn't require an empty.gif as in the most upvoted answer:
此选项不需要像在最受好评的答案中那样的 empty.gif：
HTML:
HTML：
<div class="feature">
<a href="http://www.example.com"></a>
</div>
CSS:
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 */
}
As proposed at http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/
如http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/所提议
回答by Calvin
This is a "valid" solution to achieving what you want.
这是实现您想要的“有效”解决方案。
<style type="text/css">
.myspan {
display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>
But most-likely what you really want is to have an <a>tag displayed as a block level element.
但很可能您真正想要的是将<a>标签显示为块级元素。
I would not advise using JavaScript to simulate a hyperlink as that defeats the purpose of markup validation, which is ultimately to promote accessibility (publishing well-formed documents following proper semantic rules minimizes the possibility the same document will be interpreted differently by different browsers).
我不建议使用 JavaScript 来模拟超链接，因为这违背了标记验证的目的，这最终是为了促进可访问性（按照正确的语义规则发布格式良好的文档可以最大限度地减少不同浏览器对同一文档进行不同解释的可能性）。
It would be preferable to publish a web page that does not validate, but renders and functions properly on all browsers, including ones with JavaScript disabled. Furthermore, using onclickdoes not provide the semantic information for a screen reader to determine that the div is functioning as a link.
最好发布一个不经过验证但可以在所有浏览器（包括禁用 JavaScript 的浏览器）上正常呈现和运行的网页。此外， usingonclick不会为屏幕阅读器提供语义信息来确定 div 是否用作链接。
回答by Erhard Dinhobl
The cleanest way would be to use jQuery with the data-tags introduced in HTML. With this solution you can create a link on every tag you want. First define the tag (e.g. div) with a data-link tag:
最简洁的方法是将 jQuery 与 HTML 中引入的数据标签一起使用。使用此解决方案，您可以在所需的每个标签上创建链接。首先使用数据链接标签定义标签（例如 div）：
<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
Now you can style the div however you want. And you have to create also the style for the "link"-alike behavior:
现在您可以随意设置 div 的样式。并且您还必须为“链接”类行为创建样式：
[data-link] {
cursor: pointer;
}
And at last put this jQuery call to the page:
最后把这个 jQuery 调用放到页面上：
$(document).ready(function() {
$("[data-link]").click(function() {
window.location.href = $(this).attr("data-link");
return false;
});
});
With this code jQuery applys a click listener to every tag on the page which has a "data-link" attribute and redirects to the URL which is in the data-link attribute.
使用此代码，jQuery 将点击侦听器应用于页面上具有“data-link”属性的每个标签，并重定向到位于 data-link 属性中的 URL。
回答by Tim
Not sure if this is valid but it worked for me.
不确定这是否有效，但对我有用。
The code :
编码 ：
<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>回答by Thomas Scheelhardt
To make thepeer's answer work in IE 7 and forward, it needs a few tweaks.
为了使同龄人的答案在 IE 7 及以后的版本中工作，它需要进行一些调整。
IE will not honour z-index if the element is has no background-color, so the link will not overlap parts of the containig div that has content, only the blank parts. To fix this a background is added with opacity 0.
For some reason IE7 and various compatibility modes completely fail when using the span in a link approach. However if the link itself is given the style it works just fine.
如果元素没有背景颜色，IE 将不支持 z-index，因此链接不会重叠包含内容的包含 div 的部分，只有空白部分。为了解决这个问题，添加了不透明度为 0 的背景。
出于某种原因，在链接方法中使用跨度时，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>
回答by wdonayredroid
you could also try by wrapping an anchor, then turning its height and width to be the same with its parent. This works for me perfectly.
您也可以尝试通过包裹一个锚点，然后将其高度和宽度变为与其父项相同。这对我来说非常有效。
<div id="css_ID">
<a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>
