wake-up-neo.com

HTML - wie kann man eine ganze DIV zu einem Hyperlink machen?

Wie mache ich eine ganze DIV einen anklickbaren Hyperlink? Das heißt, ich möchte im Wesentlichen tun:

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

Und wenn eine Maus von der myclass DIV schwebt, möchte ich, dass die gesamte DIV ein anklickbarer Hyperlink ist.

htmlxhtmlhyperlink
60
Teddyk

Sie können den Onclick für JavaScript zum Div hinzufügen.

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

BEARBEITEN: für neues Fenster

<div onclick="window.open('newurl.html','mywindow');" style="cursor: pointer;">&nbsp;</div>
109
Joel Etherton

Sie können ein <a>-Element in <div> einfügen und es auf display: block und height: 100% setzen.

21
SLaks

Sie müssen lediglich den Cursor als Zeiger und nicht als Hand angeben, da der Zeiger jetzt der Standard ist. Hier der Beispielseitencode:

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

und das Beispiel CSS:

#smallbox {
    cursor: pointer;
}

Das div ist jetzt ein anklickbares Element mit 'onclick' und Sie haben den Handcursor mit dem CSS gefälscht ... erledigt, funktioniert für mich!

12
Nick Annies

Dies ist eine verspätete Antwort, aber diese Frage erscheint hoch in den Suchergebnissen, daher lohnt es sich, sie richtig zu beantworten.

Grundsätzlich sollten Sie nicht versuchen, ein div anklickbar zu machen, sondern einen div-ähnlichen Anker machen, indem Sie dem <a>-Tag ein display: block-CSS-Attribut zuweisen. 

Auf diese Weise bleibt Ihr HTML-Code semantisch gültig und Sie können das typische Browserverhalten für Hyperlinks übernehmen. Es funktioniert auch, wenn Javascript deaktiviert ist/js Ressourcen nicht geladen werden.

8
Jimmy Breck-McKye

Fügen Sie eine onclick zu Ihrem DIV-Tag hinzu.

http://webdevjunk.com/coding/javascript/3/use-onclick-to-make-entire-div-or-other-html-object-into-a-link/

7
Keith Adler

Warum machst du das nicht einfach?

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

Das sollte gut funktionieren und führt dazu, dass der "anklickbare Artikel" -Cursor geändert wird, was die vorgenannte Lösung nicht tut.

1
cfg

eine Alternative wäre Javascript und die Weiterleitung über das Onclick-Ereignis

<div onclick="window.location.href='somewhere...';">...</div>
0
tDo