使整个div可点击

Question

我在div中有一个链接，我需要让整个div可点击...在互联网上找到了几个教程但是没有为我工作...

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事件绑定到具有类myBox的div，然后它在div和window.location找到链接的src属性用于将页面重定向到div中存在的链接的src属性。 所以这基本上使得div可以点击。

Answer 2

如果你说你希望整个div可以点击导航，那么你可以使用一个不符合标准的anchor（）标签来包装它，或者为包含的锚标签添加一个css样式，使其大小包含div，符合标准。 在这个例子中，我将使用250px乘250px的div：

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

Answer 3

我去年遇到了这个问题。 我只是在div上添加了一个onclick。 像这样： <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'"> <div id="testimonial" style="cursor:pointer;" onclick="document.location='http://www.mysite.com/testimonials.html'">

Answer 4

在HTML5中，现在可以在a中使用div或其他内容 。 这应该够了吧。 不需要脚本，除非链接中包含这些脚本。

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/