使整个div可点击

Question

我有一个链接位于一个 div 元素内，我需要让整个 div 区域都可以点击... 在网上找到了几篇教程，但都无法满足我的需求...

- King Julien

---

你能在这里粘贴一些代码片段，说明哪些部分出了问题吗？ - Kimball Robinson

正如我在互联网上看到的，我应该向div添加display:block属性，但它不起作用...此外，我找到了一个JavaScript解决方案，但它也不起作用：http://css-tricks.com/snippets/jquery/make-entire-div-clickable/ - King Julien

为什么这被标记为CSS？应该是JavaScript。 - Nick

Answer 1

原始JavaScript：

<div onclick="alert('You clicked me !')">Click Me</div>

jQuery：

$('#div_id').click(function(){
  alert('Clicked !!');
});

更新：（参考您提供的链接）

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a>
</div>

jQuery：

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href");
     return false;
});

上面的代码使用return false取消了链接的默认行为（跳转链接），并将click事件绑定到class为myBox的div上，然后在该div中查找链接的src属性，使用window.location将页面重定向到该div中存在的链接的src属性。因此，这基本上使该div可点击。

- Sarfraz

Answer 2

如果你想让整个div可点击跳转，你可以将其包裹在非标准的锚（）标签中，或者为内部的锚标签添加CSS样式，使其大小与包含的div相同，这是符合标准的。在本例中，我将使用一个大小为250px x 250px的div：

<div id="container"><a href="" style="display:block;width:250px;height:250px;">Link</a></div>

- Allen Gingrich

---

为什么在a标签内部嵌套div不符合标准？是否有一些有用的资源可以指导哪些元素可以放置在哪里（我知道块级元素不能放在行内元素内，但是...）？ - Eric

你不能将块级元素放在内联元素中。没错，这不会在浏览器中破坏你的代码，但很可能无法正确验证。很高兴能帮助你，Levani。 - Allen Gingrich

这是一个非常好的解决方案，避免了经典的javascript window.location=''，谢谢。 - Rob Forrest

Answer 3

去年我遇到了这个问题。我只需在div上添加一个onclick事件，如下所示：<div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">

该方法可以解决问题。

- Wolf Cat

Answer 4

在HTML5中，现在可以在标签内嵌套div或其他元素。这应该就可以解决问题了。不需要使用脚本，除非你的链接中包含脚本。

- John A.

Answer 5

您可以使用JavaScript代码来实现您的目标， 请查看本教程。

$(".myBox").click(function(){
     window.location=$(this).find("a").attr("href"); 
     return false;
    });

这是 HTML 的示例：

<div class="myBox">
     blah blah blah.
    <a href="http://google.com">link</a></div>

但是有一种巧妙的方法可以使用CSS代码实现这一点，您必须将锚标签嵌套在div标签中，并将此属性应用于它，

display:block;

当你完成这个操作后，它将使整个宽度区域可点击（但在锚点标记的高度范围内），如果你想覆盖整个 div 区域，你必须将锚点标记的高度设置为与 div 标记的高度完全相同，例如：

height:60px;

这将使整个区域可点击，然后您可以应用text-indent:-9999px到锚标记以实现目标。

这真的很棘手和简单，只是使用CSS代码创建的。

这里有一个示例：http://jsfiddle.net/hbirjand/RG8wW/

- Hbirjand