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，然后找到链接的src div中的1}}属性和window.location用于将页面重定向到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'">

Answer 4

在HTML5中，现在有效 div 或 a 内的任何内容。这应该够了吧。不需要脚本，除非你的链接中有什么。

Answer 5

您可以使用JavaScript代码来实现目标，请看一下this tutorial。

$(".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代码创建的。

这是一个example：http://jsfiddle.net/hbirjand/RG8wW/

使整个div可点击

5 个答案: