web-dev-qa-db-fra.com

HTML - comment transformer un DIV entier en hyperlien?

Comment puis-je transformer une DIV entière en hyperlien cliquable. Sens, je veux essentiellement faire:

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

Et chaque fois que la souris survole la myvasse DIV, je souhaite que la DIV entière soit un hyperlien cliquable.

htmlxhtmlhyperlink
60
Teddyk

Vous pouvez ajouter le onclick for JavaScript dans le div.

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

EDIT: pour une nouvelle fenêtre

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

Vous pouvez insérer un élément <a> dans le <div> et le définir sur display: block et height: 100%.

21
SLaks

Il vous suffit de spécifier le curseur sous forme de pointeur, et non de main, car le pointeur est désormais la norme. Voici l'exemple de code de page:

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

et l'exemple CSS:

#smallbox {
    cursor: pointer;
}

Donc, la div est maintenant un élément cliquable utilisant 'onclick' et vous avez simulé le curseur de main avec le CSS ... travail effectué, fonctionne pour moi!

12
Nick Annies

Ceci est une réponse tardive, mais cette question apparaît fortement sur les résultats de recherche alors il vaut la peine de répondre correctement.

Fondamentalement, vous ne devriez pas essayer de rendre une div cliquable, mais plutôt une ancre de type div en donnant à la balise <a> un attribut CSS display: block. 

De cette façon, votre code HTML reste sémantiquement valide et vous pouvez hériter des comportements typiques du navigateur pour les liens hypertexte. Cela fonctionne également même si javascript est désactivé/les ressources js ne se chargent pas.

8
Jimmy Breck-McKye

Ajoutez une onclick à votre balise DIV.

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

7
Keith Adler

Pourquoi ne fais-tu pas ça

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

Cela devrait fonctionner correctement et Demander le changement de curseur "élément cliquable", ce que la solution susmentionnée ne fera pas.

1
cfg

alternative serait javascript et transfert via l'événement onclick

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