javascript - 如何在整个 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

您必须在类为“.trending”的div 中创建链接。单击 div 中的任何位置时重定向到该链接值。

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

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