Naj bo celoten Div klikljiv - CSS-triki

Anonim

Posodobitev november 2020: Mislim, da je najboljša možna tehnika za to metoda 4 v tem članku. Element ovojnice (ali katerega koli drugega elementa) ostaja semantičen in dostopen, hkrati pa je »klikljiv« na celotnem območju. Ne prekine izbire besedila in spoštuje druge "ugnezdene" interaktivne elemente.

To je popolnoma veljaven HTML:

 anything 

In ne pozabite, da lahko ustvarite povezave display: block;, tako da celotno pravokotno območje postane "klikljivo". Ampak, če je notri veliko vsebine, je za dostopnost grozno, saj vso to vsebino beremo kot interaktivno povezavo.

Če nujno potrebujete JavaScript, je en način, da poiščete povezavo znotraj divja in odprete njegovo, hrefko kliknete div. To je z jQuery:

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

Poišče povezavo znotraj divja z razredom “myBox”. Preusmeritve na to vrednost povezav, kadar se klikne kjer koli v divju.

Referenčni HTML:

 blah blah blah. link 

Lahko pa na data-*atribut nastavite atribut in naredite tako:

window.location = $(".myBox").data("location");