如何在整个div上应用链接？

Question

我的主页上有一个div，显示我的Woocommerce商店中最受欢迎的10种产品。

HTML：

<div id="trending">
    <p class="trending-title">Trending Products</p>
    <?php echo do_shortcode('[best_selling_products per_page="10" columns="5"]'); ?>
    <p class="please-scroll">*Please type in your delivery postcode in the search bar above to see the thousands of trending products available in you area.</p>
</div>

我确实希望用户购买这些产品，但我要求他们先输入邮政编码。我已使用以下代码删除了单个产品可点击的功能：

#trending .woocommerce ul.products li.product {
    margin-bottom: 3%;
    pointer-events: none;
}

现在我希望整个div可以点击一个链接，这是一个重定向链接，用户可以在其中键入他们的邮政编码并继续。我试过了：

<a class="to-scroll" href="http://localhost:8888/devo-wordpress/information">
    <div id="trending">
        <p class="trending-title">Trending Products</p>
        <?php echo do_shortcode('[best_selling_products per_page="10" columns="5"]'); ?>
        <p class="please-scroll">*Please type in your delivery postcode in the search bar above to see the thousands of trending products available in you area.</p>
    </div>
</a>

CSS：

a.to-scroll {
    z-index: 1;
    display: block;
}

但这不起作用。有没有人能够深入了解我如何为这个div的整个内容创建一种链接覆盖，以便可以点击一个链接？ 非常感谢你！

Answer 1

好吧，你可以像这样添加一个带有JQuery的JS：

$('#trending').on('click', function(e) {
    e.preventDefault();
    window.location = 'http://the-url-you-want';
});

Answer 2

您必须在div中使用＆＃34; .trending＆＃34;类创建链接。当点击div中的任何位置时，重定向到该链接值。

＆＃13;

＆＃13;

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

＆＃13;

<div class="trending">
  Your content goes here.
  <a href="http://example.com"></a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

这里有很多jQuery ......

该代码有效，你还有其他问题，在假设你已经破坏之前就单独测试。