带有嵌套 div 的可点击 div答案

【问题标题】：Clickable div with nested divs inside带有嵌套 div 的可点击 div
【发布时间】：2012-06-28 23:12:35
【问题描述】：

我正在寻找一个可点击的 div，其中嵌套了更多的 div。据我了解，如果您设置锚标记 display:block 的样式，它会充当块 (div)，您可以在其中嵌套想要可点击的 div。

但是，我不相信您可以继续嵌套除此之外的更多 div...如果是这种情况，为什么会这样？

另外，解决这个问题的最佳/最简单的解决方案是什么。理想情况下是所有 CSS/HTML，但如果 CSS/HTML 真的不可能，则 jQuery 解决方案也可以。

无论如何...例子：

只要锚的样式为 display:block...

在此处输入代码

<a>
     <div id='first'>
     </div>
</a>

这不会...

在此处输入代码

<a>
     <div id='first'>
          <div id='inside first'>
          </div>
          <div id='inside first 2'>
          </div>
     </div>
</a>

任何和所有的帮助表示赞赏。谢谢！

【问题讨论】：

您可以在锚点深处嵌套任何级别的东西（当然假设是 HTML5）。你的第二个例子有效。为什么你认为它不会？
有吗？我刚读到它不会。我没有意识到......我想我当时正在阅读一些更过时的答案。另外，对于 HTML5，我假设我仍然需要将 'display:block' 分配给锚标记以使其工作，是吗？
不，您不需要执行“display: block;”。如果锚点内部有块级元素，它会正常显示为块。看到这个小提琴：jsfiddle.net/uyrn4/3
那么像这样的答案：stackoverflow.com/questions/1827965/… 只是过时了吗？我猜 HTML5 在某些方面有所改进，因为这里的答案确实表明它们是 HTML 4。太棒了。谢谢！

标签： jquery css html anchor block

【解决方案1】：

当然你的第二个变种会起作用 - http://jsfiddle.net/W5jG8/ 你可以更深入。事实上，嵌套的深度是没有限制的。（或者可能有，但与现实生活中的案例无关）

但是在 HTML5 之前将块级元素嵌套到最初的内联元素中在语义上是不正确的。一种解决方案是将所有<div>-s 替换为<span>-s 并使其阻塞。

或者您可以将 <div>-s 与 jQuery 一起使用，并将点击侦听器附加到包装器 - http://jsfiddle.net/W5jG8/

【讨论】：

所以你可以用 HTML5 来做，但它在语义上是不正确的。它在语义上不正确的后果是什么？ made into block 不就和 div 一样吗？这如何使事物在语义上变得更好？我不是这里的专家，因此非常感谢任何/所有帮助理解。谢谢！
当其他开发人员查看您的代码时，语义不正确会导致巨大的尴尬 :) 严肃的一面 - webdesignfromscratch.com/html-css/why-write-semantic-html

【解决方案2】：

如果你使用HTML5 Doctype，使用锚标签来包装div元素是有效的，假设你没有使用HTML5 Doctype，你也可以试试这个：

div#first {
  cursor: pointer;
}

$('#first').click(function() {
    window.location = 'http://www.example.com'
})

【讨论】：

【解决方案3】：

最简单的方法是使用 jquery，为你想要点击的 div 指定一个 ID，如下所示：

$('#div_Id').click(function(){

blablabla...

});

这里是 somme 文档：http://api.jquery.com/click/

【讨论】：

哦，对不起，我真的不明白你的问题：事实上，你正在寻找如何使 div 可点击...

【解决方案4】：

将 div 标签放在锚标签中是无效的 html，因此您不应该这样做。在您的情况下，最简单的方法是使用一点 JavaScript 并在您的父 div 上定义一个简单的 onclick 事件，例如：

 <div id='first' onclick="javascript:MyRedirectFunction()">
      <div id='inside first'>
      </div>
      <div id='inside first 2'>
      </div>
 </div>

那么如果你想让用户明白这个 div 是可点击的，你可以使用 CSS 给它一个类似锚点的行为，例如：

div#first{ cursor: pointer; }
div#first:hover{ background-color:#CCCCCC;}

【讨论】：