如何在没有 JavaScript 的情况下在 html 和 css 中使整个“div”可点击？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8160494/
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
How to make a whole 'div' clickable in html and css without JavaScript?
提问by Andy Lobel
I want to make it so that a whole div is clickable and links to another page when clicked without JavaScript and with valid code/markup.
我想让整个 div 可以点击，并在没有 JavaScript 和有效代码/标记的情况下点击时链接到另一个页面。
If I have this which is what I want the result to do -
如果我有这就是我想要的结果 -
<a href="#">
<div>This is a link</div>
</a>
The W3C validator says that block elements shouldn't be placed inside an inline element. Is there a better way to do this?
W3C 验证器说块元素不应该放在内联元素中。有一个更好的方法吗？
采纳答案by Alex Norcliffe
a whole div links to another page when clicked without javascript and with valid code, is this possible?
在没有 javascript 和有效代码的情况下单击时，整个 div 链接到另一个页面，这可能吗？
Pedantic answer: No.
迂腐的回答：没有。
As you've already put on another comment, it's invalid to nest a divinside an atag.
由于您已经发表了另一条评论，因此div在a标签内嵌套 a 是无效的。
However, there's nothing preventing you from making your atag behave very similarly to a div, with the exception that you cannot nest other block tags inside it. If it suits your markup, set display:blockon your atag and size / float it however you like.
但是，没有什么可以阻止您使a标记的行为与 a 非常相似，只是div您不能在其中嵌套其他块标记。如果它适合您的标记，请设置display:block您的a标签和大小/随心所欲地浮动。
If you renege on your question's premise that you need to avoid javascript, as others have pointed our you can use the onClick event handler. jQuery is a popular choice for making this easy and maintainable.
如果您违背问题的前提，即您需要避免使用 javascript，正如其他人指出的那样，您可以使用 onClick 事件处理程序。jQuery 是一种流行的选择，使这变得容易和可维护。
Update:
更新：
In HTML5, placing a <div>inside an <a>is valid.
在 HTML5 中，将 a<div>放在 an 内<a>是有效的。
See http://dev.w3.org/html5/markup/a.html#a-changes(thanks Damien)
请参阅http://dev.w3.org/html5/markup/a.html#a-changes（感谢Damien）
回答by Mario
It is possible to make a link fill the entire div which gives the appearance of making the div clickable.
可以使链接填充整个 div，从而使 div 看起来可点击。
CSS:
CSS：
#my-div {
background-color: #f00;
width: 200px;
height: 200px;
}
a.fill-div {
display: block;
height: 100%;
width: 100%;
text-decoration: none;
}
HTML:
HTML：
<div id="my-div">
<a href="#" class="fill-div"></a>
</div>
回答by Jamshid Hashimi
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
回答by Sinan Erdem
Without JS, I am doing it like this:
没有JS，我是这样做的：
My HTML:
我的 HTML：
<div class="container">
<div class="sometext">Some text here</div>
<div class="someothertext">Some other text here</div>
<a href="#" class="mylink">text of my link</a>
</div>
My CSS:
我的CSS：
.container{
position: relative;
}
.container.a{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
text-indent: -9999px; //these two lines are to hide my actual link text.
overflow: hidden; //these two lines are to hide my actual link text.
}
回答by John
My solution without JavaScript/images. Only CSS used. It works in all browsers.
我的解决方案没有 JavaScript/图像。仅使用 CSS。它适用于所有浏览器。
HTML:
HTML：
<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
buy now<br />free shipping<br />no further costs
</a>
CSS:
CSS：
.add_to_cart:hover {
background-color:#FF9933;
text-decoration:none;
color:#FFFFFF;
}
.add_to_cart {
cursor:pointer;
background-color:#EC5500;
display:block;
text-align:center;
margin-top:8px;
width:90px;
height:31px;
border-radius:5px;
border-width:1px;
border-style:solid;
border-color:#E70000;
}
There is an example on https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php
https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php上有一个例子
回答by selfthinker
Nesting block level elements in anchors is not invalidanymore in HTML5. See http://html5doctor.com/block-level-links-in-html-5/and http://www.w3.org/TR/html5/the-a-element.html.
I'm not saying you should use it, but in HTML5 it's fine to use <a href="#"><div></div></a>.
在HTML5 中，锚中嵌套块级元素不再无效。请参阅http://html5doctor.com/block-level-links-in-html-5/和http://www.w3.org/TR/html5/the-a-element.html。我并不是说你应该使用它，但在 HTML5 中使用.<a href="#"><div></div></a>
The accepted answer is otherwise the best one. Using JavaScript like others suggested is also bad because it would make the "link" inaccessible(to users without JavaScript, which includes search engines and others).
否则，接受的答案是最好的答案。像其他人建议的那样使用 JavaScript 也是不好的，因为它会使“链接”无法访问（对于没有 JavaScript 的用户，包括搜索引擎和其他人）。
回答by Josh Foskett
jQuery would allow you to do that.
jQuery 将允许您这样做。
Look up the click()function:
http://api.jquery.com/click/
查click()函数：http:
//api.jquery.com/click/
Example:
例子：
$('#yourDIV').click(function() {
alert('You clicked the DIV.');
});
回答by Dot NET
Well you could either add <a></a>tags and place the div inside it, adding an href if you want the div to act as a link. Or else just use Javascript and define an 'OnClick' function. But from the limited information provided, it's a bit hard to determine what the context of your problem is.
好吧，您可以添加<a></a>标签并将 div 放在其中，如果您希望 div 充当链接，则添加一个 href。或者只是使用 Javascript 并定义一个“OnClick”函数。但是根据提供的有限信息，很难确定您的问题的背景是什么。
回答by Bruno
.clickable {
cursor:pointer;
}
回答by Tys
Something like this?
像这样的东西？
<div onclick="alert('test');">
</div>
