Wie kann ich einen Link über dieses gesamte div anwenden?

Question

Ich habe ein div auf meiner Homepage, die die 10 beliebtesten Produkte in meinem Woocommerce-Shop anzeigt.

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> 

Ich Anwender wollen diese Produkte kaufen, aber ich verlangen, daß sie zuerst ihre Postleitzahl eingeben. Ich habe die Möglichkeit, für die einzelnen Produkte entfernt, um den Code zu klickbare mit:

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

Jetzt habe ich das ganze div ONE Link anklickbar sein wollen, die eine Umleitung Link ist, wo Nutzer ihre Postleitzahl eingeben können und Vorgehen. Ich habe versucht:

<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; 
} 

Aber das funktioniert nicht. Hat jemand einen Einblick, wie ich eine Art Link-Overlay für den gesamten Inhalt dieses Div erstellen kann, um an einen Link anklickbar zu sein? Vielen Dank im Voraus!

Answer 1

Sie Link in div mit Klasse erstellen, haben von ".trending". Weist auf diesen Linkwert um, wenn irgendwo in div geklickt wird.

$(".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

Nun, könnten Sie eine JS mit JQuery wie so hinzufügen:

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

Answer 3

So viel jQuery hier ...

Dieser Code funktioniert, können Sie andere Probleme haben, Test Dinge isoliert vor davon aus, dass, was Sie bereits haben ist kaputt.