将DIV实现为链接

Question

如何使用jQuery实现在单击时执行链接的div。在HTML中执行此操作非常简单，如下所示，但似乎jQuery解决方案也可能可用。但是，我不确定如何在jQuery中执行指向另一个URL的链接。

div#download {
    width:200px;
    height:75px;
    background-image:url(../../images/download.png);
}
a#dwnld {
    display:block;
    width:100%;
    height:100%;
}


<div id="download">
   <a id="dwnld" href="../../pay_form.php?pn=10"></a>
</div>

Answer 1

我不确定，也许你必须在JQuery中使用Trigger函数：

$("#download").click(function (){
    $("#dwnld").trigger("click");
});

Answer 2

这适用于您当前的HTML：

$('#download').on('click', function() {
  $('a', this).trigger('click')
});

为什么不能让您的链接成为display: block并使其功能像<div>一样？

Answer 3

这会在点击

上找到href和重定向（window.location）

$('#download').click(function(){
    window.location = $(this).find('a').attr('href');
});

Answer 4

点击导致其他网站的div

正确准备DIV后，你可以简单地把它放在：

jQuery('.div-as-a-link').on('click', function(){
    window.location = jQuery(this).data('url');
});

这适用于具有“div”类的每个div-as-a-link元素，其中data-url属性设置为您要去的网站的位置

演示在这里：http://jsfiddle.net/tadeck/LQu4v/

解决方案的完整代码

示例HTML 是：

<div class="div-as-a-link" data-url="http://en.wikipedia.org/">
    This is a link that after being clicked leads you to some site.
</div>

最重要的部分 类（因此我们可以区分可点击的div与其他div）和 data-url属性包含我们在点击特定div后要访问的URL。

您还可以单独使这些特定的div显示不同（例如，使用pointer光标）：

.div-as-a-link {
    cursor: pointer;
}

最后还有一个JavaScript，它将事件与div类的现有div-as-a-link绑定在一起：

jQuery('.div-as-a-link').on('click', function(){
    window.location = jQuery(this).data('url');
});

这就是你所需要的：）

声明

但请记住：<a>元素用于链接，<div>不是。 <div>用于分组元素或用于样式目的，当没有其他元素可用时应使用 （在这种情况下，您有另一个元素可用：<a>，只是样式它正确）。

详情请见Mozilla Developer Network: div

Answer 5

试试这个：

#dwnld {
  background-image:url(../../images/download.png);
  display: block;
  width: 200px;
  height: 75px;
}

<a id="dwnld" href="../../pay_form.php?pn=10"></a>

我的另一个答案和Tadeck的答案应该做你想要的如果你有兴趣使用jQuery。其他人的答案解决了有关最佳实践的不同问题。

理想情况下，如果您有一个打开新页面的链接，您只想使用常规的旧锚标记。如果需要它来显示具有特定宽度和高度的背景图像，则不需要div。您只需将锚点设置为块级元素。

Answer 6

div#dwnld {
    display: block;
    width:200px;
    height:75px;
    background-image:url(../../images/download.png);
}

a#dwnld {
    display:block;
    width:100%;
    height:100%;
}

这应该适合你。