把一个div变成一个链接
我有一个带有一些花哨的视觉内容的<div>块，我不想改变。 我想让它成为一个可点击的链接。
我正在寻找诸如<a href="…"><div> … </div></a> ，但这是有效的XHTML 1.1。
来到这里希望find一个更好的解决scheme，但我不喜欢这里提供的任何。 我想你们有些人误解了这个问题。 OP想让一个充满内容的行为像一个链接。 其中一个例子就是Facebook的广告 – 如果你看，他们实际上是正确的标记。
对我来说，没有数字是：JavaScript（不应该只需要一个链接，非常糟糕的search引擎优化/可访问性）; 无效的HTML。
本质上是这样的：
- 使用普通的CSS技术和有效的HTML构build你的面板。
- 在那里放置一个链接，如果用户点击面板（你也可以有其他的链接），你想成为默认链接。
- 在该链接内部，放置一个空的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>标记内，这是一个可点击的链接 - 给出面板位置内的任何其他链接：相对和一个合适的Z-索引（> 1），使它们在默认的跨度链接之前
你不能让div本身成为一个链接，但是你可以使一个<a>标签作为一个block ，和<div>具有相同的行为。
a { display: block; }
然后你可以设置它的宽度和高度。
这是一个古老的问题，但我想我会回答，因为这里的每个人都有一些疯狂的解决scheme。 这其实很简单
一个锚标签是这样工作的 –
<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>
SOOO …
<a href="whatever you want"> <div id="thediv" /> </a>
虽然我不确定这是否有效。 如果这是口头解决scheme的原因，那么我表示歉意。
需要一点JavaScript。 但是，你的div是可点击的。
<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></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/所build议的;
这是一个“有效”的解决scheme来实现你想要的。
<style type="text/css"> .myspan { display: block; } </style> <a href="#"><span class="myspan">text</span></a>
但最有可能的是，你真正想要的是将<a>标签显示为块级元素。
我不会build议使用JavaScript来模拟超链接，因为这会破坏标记validation的目的，最终促进可访问性（在适当的语义规则之后发布格式良好的文档，从而最大限度地减less同一文档被不同浏览器解释的可能性）。
最好是发布不validation的网页，但在所有浏览器 （包括JavaScript禁用的浏览器）上正常呈现和运行 。 此外，使用onclick不提供屏幕阅读器的语义信息，以确定该div是作为一个链接。
不知道这是否有效，但它为我工作。
代码 ：
<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>
为了让同学的答案在IE 7中正常运行，需要做一些调整。
-
如果元素没有背景颜色，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>
最简洁的方法是使用带有HTML中引入的数据标签的jQuery。 有了这个解决scheme，你可以创build一个你想要的每个标签的链接。 首先用数据链接标签定义标签（例如div）：
HTML: ------------- <div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>
现在，你可以风格的分区，但是你想要的。 而且你还必须创造“链接”风格 – 类似的行为：
CSS: ------------- [data-link] { cursor: pointer; }
最后把这个jQuery调用到页面：
JAVASCRIPT: ------------- $(document).ready(function() { $("[data-link]").click(function() { window.location.href = $(this).attr("data-link"); return false; }); });
使用这段代码，jQuery将页面侦听器应用到页面上具有“数据链接”属性的每个标记，并redirect到data-link属性中的URL。
你也可以通过包装一个锚来尝试，然后把它的高度和宽度与其父母相同。 这对我来说是完美的。
<div id="css_ID"> <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a> </div>
这篇文章是老的我知道，但我只是不得不解决同样的问题，因为简单地写一个正常的链接标记与显示设置为阻止不会使整个单元格在IE中可点击。 所以要解决这个问题要比使用JQuery简单得多。
首先让我们来理解为什么会发生这种情况：IE浏览器不会让一个空的div点击它只会使该div / a标签内的文本/图像可点击。
解决scheme：使用bakground图像填充div并将其隐藏在查看器中。
怎么样？ 你提出很好的问题，现在听。 将此背景样式添加到a标签
> "background:url('some_small_image_path') > -2000px -2000px no-repeat;"
现在你可以看到整个div可以点击了。 这对我来说是最好的方式，因为我使用它为我的照片库，让用户在图像的一半克隆左/右移动，然后放置一个小的图像以及视觉效果。 所以对我来说，我仍然使用左右图像作为背景图像！
为什么不？ use <a href="bla"> <div></div> </a>可以在HTML5中正常工作
只需要在块中的链接，并用jQuery来增强它。 它没有JavaScript的人优雅退化100％。 这样做与HTML不是真正的最好的解决scheme。 例如：
<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使块可点击（通过网页devise器墙 ）：
$(document).ready(function(){ $("#div_link").click(function(){ window.location=$(this).find("a").attr("href"); return false; }); });
那么你所要做的就是将光标样式添加到div
#div_link:hover {cursor: pointer;}
对于奖励积分只适用于这些样式，如果通过添加一个'js_enabled'类的div，或正文，或任何启用JavaScript。
这个例子对我有用：
<div style="position: relative; width:191px; height:83px;"> <a href="link.php" style="display:block; width:100%; height:100%;"></a> </div>
其实你现在需要包含JavaScript代码，请查看本教程 。
但有一个棘手的方法来实现这个使用CSS代码，你必须在你的div标签中嵌套一个锚标记，你必须将这个属性应用到它，
display:block;
当你这样做，它会使整个宽度区域可点击（但在锚标签的高度），如果要覆盖整个div区域，您必须将锚标记的高度完全设置为高度div标签，例如：
height:60px;
这将使整个区域可点击，然后您可以应用text-indent:-9999px来锚定标签来实现目标。
这非常棘手和简单，它只是使用CSS代码创build的。
这里是一个例子 ： http : //jsfiddle.net/hbirjand/RG8wW/
虽然我不build议在任何情况下这样做，下面是一些代码，使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>
再一次，我不会这样做，所以请不要投票给我。 我只是试图回答这个问题。
这为我工作：
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
你可以通过以下方法给你的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>
你可以使用href标记来制作元素，或者你可以使用jquery和use
$('').click(function(e){ e.preventDefault(); //DO SOMETHING });
这是最简单的方法。
说，这是我想要点击的div块：
<div class="inner_headL"></div>
所以把一个href如下所示：
<a href="#"> <div class="inner_headL"></div> </a>
只要将div块视为正常的html元素，并启用通常的href标记即可。
它至less在FF上工作。
这是在BBC网站和“卫报”上使用的最好方法：
我在这里find了这个技术： http : //codepen.io/IschaGast/pen/Qjxpxo
inheritance人的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>
inheritance人的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); } } }
我拉了一个variables，因为我的链接中的一些值将根据用户来自哪个logging而改变。 这工作testing：
<div onclick="location.href='page.html';" style="cursor:pointer;">...</div>
这也是有效的
<div onclick="location.href='<%=Webpage%>';" style="cursor:pointer;">...</div>
如果只是一切都可能是这个简单的…
#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>
只是想在盒子外面一点;-)
我聪明的裤子回答：
“回避：”如何使块级元素超链接并在XHTML 1.1中validation“
只要使用HTML5 DOCTYPE DTD“。
ie7实际上并没有成立
onclick="location.href='page.html';"
适用于IE7-9，Chrome，Safari，Firefox，
