Tengo algunas tarjetas con una imagen, texto y enlace dentro de ellas. En mi caso, no es posible envolver la tarjeta con una etiqueta de anclaje. ¿Es posible apuntar a la etiqueta de anclaje dentro de la tarjeta y luego hacer que se pueda hacer clic en toda la tarjeta para ir a ese enlace usando jquery?
Estado ideal : al hacer clic en cualquier lugar de la tarjeta, se activa el enlace y se lleva al usuario a él.
<div class="todays-news"> <div class="container"> <div class="owl-carousel owl-theme"> <div class="item"> <div class="card"> <img src="images/home/home-image.png" /> <div class="card-body"> <strong>This is a title</strong> <p>This is a paragraph.</p> <a href="https://www.example.com/">Continue Reading</a> </div> </div> </div> <div class="item"> <div class="card"> <img src="images/home/home-image-2.png" /> <div class="card-body"> <strong>This is a title</strong> <p>This is a paragraph.</p> <a href="https://www.example.com/">Continue Reading</a> </div> </div> </div> </div> </div> </div>Sí, puede hacer esto con JavaScript, aunque si pudiera resolver el problema de no poder convertir la tarjeta en un ancla, sería mejor. No hay ninguna razón por la que no pueda poner un div en un a , el a de contenido de a es transparente .
Pero si no puedes:
$(document).on("click", ".card", function(event) { const $this = $(this); // Don't interfere with a click actually on the anchor // (that way, the user can still right-click it and // use the browser-supplied menu for oew in new tab, // shift click, etc.) if ($this.find($(event.target).closest("a")[0]).length === 0) { // Not on the anchor, do it event.preventDefault(); $this.find("a")[0].click(); } }); Tenga en cuenta que debe hacer click en el elemento DOM, no en el objeto jQuery. Si lo llama en el objeto jQuery, no activará la acción predeterminada.
Agregue un controlador de clics para la tarjeta y haga que haga clic en el ancla:
$(".card").click(function() { $(this).find("a")[0].click(); });Simplemente use un controlador onclick en el div :
<div class="todays-news"> <div class="container"> <div class="owl-carousel owl-theme"> <div class="item"> <div class="card" onclick="this.querySelector('a').click(); return true;"> <img src="images/home/home-image.png" /> <div class="card-body"> <strong>This is a title</strong> <p>This is a paragraph.</p> <a href="https://www.example.com/">Continue Reading</a> </div> </div> </div> <div class="item" onclick="this.querySelector('a').click(); return true;"> <div class="card"> <img src="images/home/home-image-2.png" /> <div class="card-body"> <strong>This is a title</strong> <p>This is a paragraph.</p> <a href="https://www.example.org/">Continue Reading</a> </div> </div> </div> </div> </div> </div>