Comment faites-vous une balise div dans un lien

Question

Comment faites-vous une balise div dans un lien. Je voudrais que toute ma div soit cliquable.

3zzy · Answer

JS:

<div onclick="location.href='url'">content</div>

jQuery:

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

Assurez-vous d'utiliser cursor:pointer pour ces DIV

Justin Yost · Answer

Si vous devez définir votre balise d'ancrage dans la div, vous pouvez également utiliser CSS pour définir l'ancre afin qu'elle remplisse la div via display: block.

En tant que tel:

<div style="height: 80px"><a href="#" style="display: block">Text</a></div>

Désormais, lorsque l'utilisateur fait flotter son curseur dans cette div, la balise d'ancrage remplit la div.

Rael Gugelmin Cunha · Answer

Si vous utilisez HTML5, comme indiqué dans cet autre question, vous pouvez placer votre div dans a:

<a href="http://www.google.com"><div>Some content here</div></a>

Préférez cette méthode car elle indique clairement dans votre structure que tout le contenu est cliquable et où il pointe.

zzzzBov · Answer

Vous voulez donc qu'un élément soit quelque chose que ce n'est pas?

De manière générale, ce n'est pas une bonne idée. Si vous avez besoin d'un lien, utilisez un lien. La plupart du temps, il est plus facile d'utiliser simplement le balisage approprié auquel il appartient.

Cela dit, il faut parfois enfreindre les règles. Maintenant, la question n'a pas javascript , alors je vais mettre l'avertissement ici:

Vous ne pouvez pas avoir un <div> agir en tant que lien sans utiliser un lien (ou un équivalent, tel qu'un <form> qui ne contient qu'un bouton d'envoi) ou en utilisant JavaScript.

A partir de maintenant, cette réponse suppose que JavaScript est autorisé et que jQuery est utilisé (pour la brièveté de l'exemple).

Cela dit, voyons ce qui fait du lien un lien.

Les liens sont généralement des éléments sur lesquels vous cliquez pour vous diriger vers un nouveau document.

Cela semble assez simple. Écoutez un événement de clic et changez l'emplacement:

_{Ne faites pas cela}

$('.link').on('click', function () { window.location = 'http://example.com'; });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="link">Fake Link</div>

Voilà, le <div> est maintenant un lien. Attends ... c'est quoi ça? Qu'en est-il de l'accessibilité? Ah oui, les lecteurs d'écran et les utilisateurs de technologies d'assistance ne pourront pas cliquer sur le lien, surtout s'ils n'utilisent que le clavier.

Une solution assez simple: permettons aux utilisateurs uniquement au clavier de se concentrer sur le <div> et de déclencher l'événement click lorsqu'ils appuieront sur Enter:

_{Ne faites pas cela non plus}

$('.link').on({ 'click': function () { window.location = 'http://example.com'; }, 'keydown': function (e) { if (e.which === 13) { $(this).trigger('click'); } } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="link" tabindex="0">Fake Link</div>

Encore une fois, le code <div> est maintenant un lien. Attendez ... encore? Toujours des problèmes d'accessibilité? Oh ok, il s'avère donc que la technologie d'assistance ne sait pas encore que le <div> est un lien. Ainsi, même si vous pouvez y accéder via le clavier, les utilisateurs ne sont pas informés de ce qu'il faut en faire.

Heureusement, il existe un attribut qui peut être utilisé pour remplacer le rôle par défaut d'un élément HTML, de sorte que les lecteurs d'écran, etc., sachent également comment classer par catégorie les éléments personnalisés, comme notre code <div> ici. L'attribut est bien sûr l'attribut [role], et il indique bien aux lecteurs d'écran que notre <div> est un lien:

_{Ugh, cela empire chaque minute}

$('[role="link"]').on({ 'click': function () { window.location = 'http://example.com'; }, 'keydown': function (e) { if (e.which === 13) { $(this).trigger('click'); } } });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0">Fake Link</div>

Enfin, notre <div> est un lin --- oh maintenant les autres développeurs se plaignent. Et maintenant?

Ok, donc les développeurs n'aiment pas le code. Ils ont essayé de preventDefault lors de l’événement, et cela continue à fonctionner. C'est facile à réparer:

_{Je vous ai prévenu que c'était mauvais}

$(document).on({ 'click': function (e) { if (!e.isDefaultPrevented()) { window.location = 'http://example.com'; } }, 'keydown': function (e) { if (e.which === 13 && !e.isDefaultPrevented()) { $(this).trigger('click'); } } }, '[role="link"]'); $('[aria-disabled="true"]').on('click', function (e) { e.preventDefault(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0">Fake Link</div> <div role="link" aria-disabled="true" tabindex="0">Fake disabled link</div>

Là nous l'avons --- IL Y A PLUS? Que sais-je d'autre? Dis-moi tout MAINTENANT pour que je puisse le réparer!

Ok, donc il n'y a aucun moyen de spécifier la cible. Nous pouvons résoudre ce problème en mettant à jour window.open.
Les événements de clic et les événements de clavier sont ignorants Ctrl, Alt, et Shift clés. C'est assez facile, il suffit de vérifier ces valeurs sur l'objet événement.
Il n'y a aucun moyen de spécifier des données contextuelles. Ajoutons simplement quelques attributs [data-*] et appelons cela un jour avec celui-là.
L'événement clic n'obéit pas au bouton de la souris utilisé, la souris du milieu doit s'ouvrir dans un nouvel onglet, la souris droite ne doit pas déclencher l'événement. Assez facile, il suffit d’ajouter quelques vérifications supplémentaires aux auditeurs de l’événement.
Les styles ont l'air bizarre. Bien sûr, les styles sont médiocres, c’est un <DIV> pas une ancre!

eh bien, je vais aborder les quatre premiers points, et NO MORE. Je l'ai eu avec cette poubelle d'élément personnalisé stupide. J'aurais juste dû utiliser un élément <a> depuis le début.

_{Je vous l'avais bien dit}

$(document).on({ 'click': function (e) { var target, href; if (!e.isDefaultPrevented() && (e.which === 1 || e.which === 2)) { target = $(this).data('target') || '_self'; href = $(this).data('href'); if (e.ctrlKey || e.shiftKey || e.which === 2) { target = '_blank'; //close enough } open(href, target); } }, 'keydown': function (e) { if (e.which === 13 && !e.isDefaultPrevented()) { $(this).trigger({ type: 'click', ctrlKey: e.ctrlKey, altKey: e.altKey, shiftKey: e.shiftKey }); } } }, '[role="link"]'); $('[aria-disabled="true"]').on('click', function (e) { e.preventDefault(); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div role="link" tabindex="0" data-href="http://example.com/">Fake Link</div> <div role="link" tabindex="0" data-href="http://example.com/" data-target="_blank">Fake Link With Target</div> <div role="link" aria-disabled="true" tabindex="0" data-href="http://example.com/">Fake disabled link</div>

_{Notez que les extraits de pile ne vont pas ouvrir les fenêtres contextuelles à cause de la manière dont ils sont mis en sandbox.}

C'est tout. C'est la fin de ce trou de lapin. Toute cette folie quand vous auriez pu simplement avoir:

<a href="http://example.com/"> ...your markup here... </a>

Le code que j'ai posté ici a probablement des problèmes. Il a probablement des bugs que même moi, je ne réalise pas encore. Essayer de dupliquer ce que les navigateurs vous donnent gratuitement est difficile. Il y a tellement de nuances faciles à oublier que cela ne vaut simplement pas la peine d'essayer de l'imiter 99% du temps.

chakrit · Answer

NE LE FAITES PAS.

Si vous voulez un lien, placez le contenu dans le <A>NCHOR</a> approprié.
Si vous voulez transformer le <DIV> en un lien, utilisez "Javascript" pour envelopper le <DIV> dans un <A>NCHOR</A>
Si vous souhaitez effectuer une action lorsque vous cliquez sur le <DIV>, utilisez le gestionnaire d'événements onclick ... et ne l'appelez pas un "lien".

Ryan Michela · Answer

<div style="cursor:pointer" onclick="document.location='http://www.google.com'">Content Goes Here</div>

Rob · Answer

<div style="cursor:pointer;" onclick="document.location='http://www.google.com'">Foo</div>

Ben Regenspan · Answer

Vous pouvez créer la fonction DIV entière en tant que lien en ajoutant un onclick = "window.location =" URL CIBLE "" et en définissant son style sur "curseur: pointeur". Mais c'est souvent une mauvaise idée de le faire car les moteurs de recherche ne pourront pas suivre le lien résultant, les lecteurs ne pourront pas s'ouvrir dans des onglets ou copier l'emplacement du lien, etc. puis définissez son style sur display: block, puis appelez-le comme un DIV.

James Thompson · Answer

Vous pouvez utiliser Javascript pour obtenir cet effet. Si vous utilisez un framework, ce genre de choses devient assez simple. Voici un exemple dans jQuery :

$('div#id').click(function (e) { // Do whatever you want });

Cette solution présente l’avantage de ne pas conserver la logique dans votre balise.

sifr4 · Answer

Gardez à l'esprit que les araignées de recherche n'indexent pas le code JS. Ainsi, si vous insérez votre URL dans du code JS, veillez également à l'inclure également dans un lien HTML traditionnel ailleurs sur la page. Autrement dit, si vous souhaitez que les pages liées soient indexées par Google, etc.