如何在没有 JavaScript 的情况下使整个 'div' 在 html 和 css 中可点击？ [复制]答案

【问题标题】：How to make a whole 'div' clickable in html and css without JavaScript? [duplicate]如何在没有 JavaScript 的情况下使整个 'div' 在 html 和 css 中可点击？ [复制]
【发布时间】：2011-12-30 22:08:47
【问题描述】：

我想让整个 div 在没有 JavaScript 和有效代码/标记的情况下单击时可以点击并链接到另一个页面。

如果我有这就是我想要的结果 -

<a href="#">
<div>This is a link</div>
</a>

W3C 验证器说块元素不应该放在内联元素中。有没有更好的方法来做到这一点？

【问题讨论】：

只是add a click event listener 到 div？
定义有效代码？有没有 JavaScript？
html 和 css 是否包含 javascript？不这么认为
@KaiQing 所以根据你的估计，你可以在 body 标签中嵌套一个 head 标签，这可以吗？语义标记的存在是有原因的。如果一切都由一切都是 DOM 元素这一事实来支配，那么我们还不如只拥有一个名为 object 的标签。
只需将<a> 设为块元素即可。

标签： html css click

【解决方案1】：

可以使链接填充整个 div，从而使 div 看起来可点击。

CSS：

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML：

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>

【讨论】：

查看此页面以使其在 Internet Explorer 中正常工作（基本上只需将宽度或高度设置为 1%：v3.thewatchmakerproject.com/journal/154/…
我相信只有
a 不会填充有填充的td，我认为div 也是如此。除了从容器中移除填充物之外，我不确定是否有其他解决方法。 a 的负边距没有帮助。 HTML4。 a 如果没有包围任何东西，也会缩小到零。

【解决方案2】：

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

【讨论】：

OP 指定“没有 javascript”。
我使用这个答案的时间让我倒退了至少两年，拯救了我的皮肤几次！再次感谢
谢谢，这节省了我一天的时间
这个我认为是最好的;)
很好的答案，谢谢！

【解决方案3】：

在没有 javascript 的情况下单击整个 div 会链接到另一个页面，并且使用有效的代码，这可能吗？

学究式的回答：没有。

由于您已经发表了另一条评论，因此将 div 嵌套在 a 标记内是无效的。

但是，没有什么可以阻止您使a 标记的行为与div 非常相似，只是您不能在其中嵌套其他块标记。如果它适合您的标记，请在您的 a 标记上设置 display:block 并根据需要调整大小/浮动。

如果您违背您的问题的前提，即您需要避免使用 javascript，正如其他人指出的那样，您可以使用 onClick 事件处理程序。 jQuery 是一个流行的选择，它使这变得简单和可维护。

更新：

在 HTML5 中，将 <div> 放在 <a> 中是有效的。

见http://dev.w3.org/html5/markup/a.html#a-changes（感谢Damien）

【讨论】：

从 HTML5 开始，在 <a> 标记中包含 <div> 是有效的：“a 元素现在是透明的；也就是说，现在允许 a 元素的实例也包含流内容”。 dev.w3.org/html5/markup/a.html#a-changes
出色的@Damien，你是对的。
是有效的 HTML5。感谢您简化了我的生活！
Alex，如果您更新答案以反映 Damien 的评论，那就太好了。这是非常有价值的信息，很遗憾它隐藏在评论中......
更新了 Damien 引用的文档的 URL：w3.org/TR/html5-diff/#content-model，然后文本搜索“现在的 a 元素”以在页面上定位
这个解决方案不会给文档中的其他标签带来潜在的问题吗？我可能不希望我的所有标签都像这样重新定义。正如@Damien 所指出的，中的
似乎是最优雅的。

【解决方案4】：

没有JS，我是这样操作的：

我的 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>

我的 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.
}

【讨论】：

不是只有文字部分可以点击吗？
不，整个容器区域都是可点击的，因为覆盖了容器内的所有区域。

【解决方案5】：

我的解决方案没有 JavaScript/图像。仅使用 CSS。它适用于所有浏览器。

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：

.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;
}

https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php上有一个例子

【讨论】：

你当然是指“只有 HTML 和 CSS”。
<div> 在哪里？这似乎没有回答这个问题。
他将display:block 添加到他的a 标签中，使其行为类似于div。它会得到相同的结果。

【解决方案6】：

在 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> 就可以了。

接受的答案是最好的答案。像其他人建议的那样使用 JavaScript 也很糟糕，因为它会使“链接”无法访问（对于没有 JavaScript 的用户，包括搜索引擎和其他人）。

【讨论】：

出色，基于标准。

【解决方案7】：

jQuery 可以让你这样做。

查找click() 函数： http://api.jquery.com/click/

例子：

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});

【讨论】：

OP 要求没有 javascript
@AlexNorcliffe 在我提交答案后他编辑了他的帖子。
@JoshFoskett 我不会显示警告框，而是重定向到另一个页面（就像通常的 href 一样）。我怎样才能做到这一点？我遇到了类似 localtion.href 的东西，这有帮助吗？
@DiAlex 这应该适合你。 jsfiddle.net/mdc2h
谢谢！我最后使用了非常相似的东西，也使用了点击事件：$("#div-id").click(function() { location.href = "./page.html"; });

【解决方案8】：

好吧，您可以添加<a></a> 标签并将 div 放在其中，如果您希望 div 充当链接，请添加一个 href。或者只使用 Javascript 并定义一个“OnClick”函数。但是从提供的有限信息来看，很难确定您的问题的背景是什么。

【讨论】：

我已经在使用它了，但它告诉你不要大声将块元素放在内联元素中，所以尝试找到一个好方法来做到这一点（：
OP 要求提供“有效代码”（我认为它们的意思是有效的标记）——在 div 中嵌套标签是无效的。
正如上面其他答案所述，标签内的 div 现在是有效的 html5。 w3c.github.io/html-reference/a.html#a-changes

【解决方案9】：

.clickable {
  cursor:pointer;
}

【讨论】：

这不会添加任何“可点击”功能。它只会改变光标。
是的。为我的目的工作:))

【解决方案10】：

这样的？

<div onclick="alert('test');">

</div>

【讨论】：

虽然我通常不鼓励内联处理程序，但在这种特定情况下它实际上可能是最好的选择
OP 要求没有 javascript

【解决方案11】：

AFAIK 你至少需要一点 JavaScript...

我建议使用jQuery。

您可以将这个库包含在一行中。然后你可以访问你的 div

$('div').click(function(){
  // do stuff here
});

并响应点击事件。

【讨论】：

OP 指定“无 javascript”。

【解决方案12】：

我们是这样使用的

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

使用

  <label for="1">

标记和捕捉是用

id=1

希望这会有所帮助。

【讨论】：