Comment voulez-vous faire une balise div dans un lien

Si vous devez définir votre balise d'ancrage à l'intérieur de la div, vous pouvez également utiliser les CSS pour définir le point d'ancrage pour remplir la div via display:block.

En tant que tel:

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

Maintenant lorsque l'utilisateur flotteurs leurs curseur dans ce div de la balise d'ancrage à remplir le div.

Si vous souhaitez qu'un élément pour quelque chose qu'elle ne l'est pas?

En général ce n'est pas une bonne idée. Si vous avez besoin d'un lien, un lien. La plupart du temps, c'est plus facile d'utiliser le balisage approprié où il appartient.

Que tout est dit, parfois, vous avez juste à briser les règles. Maintenant, la question n'a pas javascript, je vais donc mettre l'avertissement ici:

Vous ne pouvez pas avoir un <div> agir comme un lien, sans l'aide d'un lien (ou équivalent, comme un <form> qui ne contient qu'un bouton d'envoi) ou à l'aide de JavaScript.

À partir de maintenant, cette réponse va supposer que JavaScript est autorisé, et en outre que jQuery est utilisé (pour des raisons de concision de l'exemple).

Avec tous dit, permet de creuser dans ce qui fait un lien un lien.

---

Les liens sont généralement des éléments que vous cliquez sur afin qu'ils vous diriger vers un nouveau document.

Il semble assez simple. Écouter un événement de clic et de changer l'emplacement:

_{ne pas faire cette}

JS:

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

HTML:

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

Là vous l'avez, le <div> est maintenant un lien. Attendez...c'est quoi? Ce sujet de l'accessibilité? Ah oui, les lecteurs d'écran et les utilisateurs de technologies d'assistance ne sera pas en mesure de cliquer sur le lien, surtout si ils sont en utilisant uniquement le clavier.

De fixation qui est assez simple, nous allons permettre à clavier uniquement les utilisateurs à se concentrer le <div>, et de déclencher l'événement click quand ils appuyez sur Entrée:

_{Ne pas le faire}

JS:

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

HTML:

<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, là vous l'avez, ce <div> est maintenant un lien. Attendre...encore? Encore des problèmes d'accessibilité? Ah ok, donc il s'avère que la technologie d'assistance ne sait pas que le <div> est un lien, de sorte que même si vous pouvez y accéder via le clavier, les utilisateurs ne sont pas dit quoi faire avec elle.

Heureusement, il y a un attribut qui peut être utilisé pour remplacer un élément HTML par défaut de rôle, de sorte que les lecteurs d'écran et l'envie de savoir comment classer des éléments personnalisés, tels que notre <div> ici. L'attribut est bien sûr le [role] attribut, et l'a joliment dit les lecteurs d'écran que notre <div> est un lien:

_{Pouah, c'est pire chaque minute}

JS:

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

HTML:

<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. Que faire maintenant?

Ok, donc les devs n'aime pas le code. Ils ont essayé de preventDefault sur l'événement, et qu'il ne cesse de travailler. C'est facile à corriger:

_{je vous avais prévenu c'est une mauvaise}

JS:

$(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();
});

HTML:

<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 avons---IL n'y a PLUS? Quoi d'autre je ne sais? Dites-moi tout MAINTENANT afin que je puisse le corriger!

• Ok, donc il n'y a aucun moyen de spécifier la cible. Nous pouvons résoudre ce problème en mettant à jour vers window.open.
• Cliquez sur les événements et les événements de clavier sont ignorant Ctrl, Alt, et Maj touches. C'est assez facile, il suffit de cocher ceux qui les valeurs de l'objet d'événement.
• Il n'y a aucun moyen de spécifier des données contextuelles. Nous allons juste ajouter un peu de [data-*] attributs, et l'appeler un jour avec celui.
• L'événement de clic n'est pas obéissant le bouton de la souris utilisé, du milieu de la souris doit s'ouvrir dans un nouvel onglet, droit de la souris ne devrait pas être le déclenchement de l'événement. Assez facile, il suffit d'ajouter quelques plus de contrôles pour les écouteurs d'événement.
• Les styles de l'air bizarre. BIEN SÛR, LES STYLES SONT BIZARRE, C'EST UN <DIV> PAS UNE ANCRE!

bien, je vais répondre à la première des quatre questions, et rien de PLUS. Je l'ai eu avec cette stupide élément personnalisé de déchets. J'aurais juste utilisé un <a> élément depuis le début.

_{vous l'a Dit}

JS:

$(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();
});

HTML:

<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 la pile les extraits ne pas ouvrir les fenêtres popup en raison de la façon dont ils sont en bac à sable.}

Que c'est. C'est la fin de ce trou de lapin. Toute cette folie quand vous pourriez avoir simplement eu:

<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. En essayant de reproduire ce qui les navigateurs vous donner gratuitement est difficile. Il y a tellement de nuances qui sont facile d'oublier qu'il est tout simplement pas la peine d'essayer d'émuler à 99% du temps.

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

Vous pouvez faire la totalité de la DIV fonctionner comme un lien par l'ajout d'un onclick="window.location='URL de la CIBLE" et en définissant son style "cursor:pointer". Mais c'est souvent une mauvaise idée de faire cela parce que les moteurs de recherche ne sera pas en mesure de suivre la liaison qui en résulte, les lecteurs ne seront pas en mesure d'ouvrir dans des onglets ou copier le lien, l'emplacement, etc. Au lieu de cela, vous pouvez créer une balise d'ancrage et ensuite définir son style display:block , et puis le style de ce que vous auriez une DIV.

Gardez à l'esprit que la recherche des araignées n'est pas l'indice du code JS. Donc, si vous mettez votre URL à l'intérieur du code JS, assurez-vous d'inclure dans un traditionnel lien HTML, ailleurs sur la page. C'est, si vous voulez que les pages liées pour être indexé par Google, etc.