このdiv全体にリンクを適用するにはどうすればよいですか？

Question

私のホームページには、私のWoocommerceストアで最も人気のある10の製品を表示するdivがあります。

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> 

私は、ユーザーがこれらの製品を購入したいですが、私は最初に自分の郵便番号を入力するためにそれらを必要としています。私は全体のdivは、ユーザーが自分の郵便番号を入力してできる場所のリダイレクトリンクがあるONEリンクにクリッカブルになりたい今

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

：私は、コードを使用して、クリック可能にするために、個々の製品の機能を削除しました進む。私が試した：

<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の内容全体をクリックして1つのリンクにリンクできるように、リンクオーバーレイの種類を作成する方法についての洞察を持っていますか？ あらかじめありがとうございます！

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>

Answer 2

さて、あなたはそのようにjQueryを使ってJSを追加することができます。

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

Answer 3

そんなにjQueryを、あなたが他の問題を持って、単独でのテストの事は壊れてます。