HTML-jak zrobić cały DIV hiperłączem? [duplikat]

to pytanie ma już odpowiedzi tutaj : Make a div into a link (27 odpowiedzi) Zamknięte 7 lat temu .

Jak zrobić cały DIV klikalny hiperłącze. To znaczy, w zasadzie chcę zrobić:

<div class="myclass" href="example.com">
    <div>...</div>
    <table><tr>..</tr></table>
    ....
</div>

I za każdym razem, gdy ktoś unosi się myszką na myclass DIV, chcę, aby cały DIV był klikalnym hiperłączem.

Author: Muhammad Imran Tariq, 2010-02-02

7 answers

Możesz dodać onclick dla JavaScript do div.

<div onclick="location.href='newurl.html';">&nbsp;</div>

EDIT: dla nowego okna

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>
 151
Author: Joel Etherton,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-08-17 10:55:27

Możesz umieścić <a> element wewnątrz <div> i ustawić go na display: block i height: 100%.

 23
Author: SLaks,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-02 22:34:50

Musisz tylko określić kursor jako wskaźnik, a nie rękę, ponieważ wskaźnik jest teraz standardem, więc oto przykładowy kod strony:

<div onclick="location.href='portable-display-stands.html';" id="smallbox">The content of the div here</div>

I przykładowy CSS:

#smallbox {
    cursor: pointer;
}

Więc div jest teraz klikalnym elementem za pomocą "onclick" i sfałszowałeś kursor ręczny za pomocą CSS...robota wykonana, działa dla mnie!

 14
Author: Nick Annies,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-06-28 09:00:20

jest to późna odpowiedź, ale to pytanie pojawia się wysoko w wynikach wyszukiwania, więc warto odpowiedzieć poprawnie.

Zasadniczo, nie powinieneś próbować zrobić div klikalnego, ale raczej zrobić Anchor div-podobny, nadając TAGOWI <a> atrybut CSS display: block.

W ten sposób twój HTML pozostaje semantycznie poprawny i możesz dziedziczyć typowe zachowania przeglądarki dla hiperłączy. Działa również, nawet jeśli javascript jest wyłączony / zasoby js nie ładują się.

 11
Author: Jimmy Breck-McKye,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-09-25 16:05:58
 7
Author: Keith Adler,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-02 22:35:35

Dlaczego po prostu tego nie zrobisz

<a href="yoururl.html"><div>...</div></a>

To powinno działać poprawnie i spowoduje zmianę kursora "klikalnego elementu", czego powyższe rozwiązanie nie zrobi.

 4
Author: cfg,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-10-26 13:11:19

Alternatywą będzie javascript i przekazywanie poprzez Zdarzenie onclick

<div onclick="window.location.href='somewhere...';">...</div>
 1
Author: tDo,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2010-02-02 22:36:37