Question

我希望制作一个可点击的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>

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

Answer 1

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

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

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

Answer 2

如果您使用HTML5 Doctype，使用锚标记包装div元素是有效的，假设您没有使用HTML5 Doctype，您也可以尝试这样做：

div#first {
  cursor: pointer;
}

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

Answer 3

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

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

blablabla...

});

这是somme doc：http://api.jquery.com/click/

Answer 4

将div标记放在锚标记内是无效的html所以你不应该这样做。在您的情况下，最简单的方法是使用一些JavasScript并在父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;}

带有嵌套div的可点击div

4 个答案: