Transformez un div en lien


545

J'ai un <div>bloc avec un contenu visuel de fantaisie que je ne veux pas changer. Je veux en faire un lien cliquable.

Je cherche quelque chose comme <a href="…"><div> … </div></a>, mais c'est XHTML 1.1 valide.


79
une bonne raison serait une image d'arrière-plan dans le div
Simon_Weaver

1
J'ai un bon exemple de travail basé sur la réponse la plus votée. Vérifiez le violon ici
Mike

7
En HTML5, il est parfaitement valable d'avoir un divsous un a.
Juan A. Navarro

Réponses:


739

Je suis venu ici dans l'espoir de trouver une meilleure solution que la mienne, mais je n'aime aucune des solutions proposées ici. Je pense que certains d'entre vous ont mal compris la question. L'OP veut faire qu'une div remplie de contenu se comporte comme un lien. Un exemple de cela serait les publicités Facebook - si vous regardez, elles sont en fait un bon balisage.

Pour moi, les no-nos sont: javascript (ne devrait pas être nécessaire uniquement pour un lien, et très mauvais référencement / accessibilité); HTML non valide.

C'est essentiellement cela:

  • Créez votre panneau à l'aide de techniques CSS normales et d'un code HTML valide.
  • Quelque part, placez un lien que vous souhaitez être le lien par défaut si l'utilisateur clique sur le panneau (vous pouvez également avoir d'autres liens).
  • À l'intérieur de ce lien, placez une balise span vide ( <span></span>, pas<span /> - merci @Campey)
  • donner la position du panneau: relative
  • appliquer le CSS suivant à la plage vide:

    { 
      position:absolute; 
      width:100%;
      height:100%;
      top:0;
      left: 0;
    
      z-index: 1;
    
      /* fixes overlap error in IE7/8, 
         make sure you have an empty gif */
      background-image: url('empty.gif');
    }   

    Il va maintenant couvrir le panneau, et comme il est à l'intérieur d'un <A> balise, c'est un lien cliquable

  • donner tout autre lien à l'intérieur de la position du panneau: relatif et un z-index approprié (> 1) pour les placer devant le lien span par défaut

11
Merci fonctionne bien. Si les choses se cassent horriblement (comme elles l'ont fait pour moi) dans IE8, assurez-vous d'avoir une balise span d'ouverture et de fermeture (<span ...> </span>), au lieu d'une plage vide (<span ... /> ).
Campey

1
Le code ne fonctionne pas entièrement dans IE7 / 8, les autres éléments sélectionnables ont priorité sur l' <a><span></span></a>élément. C'est-à-dire que les images et les textes à l'intérieur du conteneur ne seront pas liés même si le z-index est défini.
Spoike

67
Un violon pour les gens qui sont idiots comme moi et qui ont mal lu quelque chose, donc a dû jouer un peu avec: jsfiddle.net/hf75B/1
AlexMA

7
Avez-vous essayé cela dans IE9? J'aime cette méthode, et je l'utilise, mais je viens de la tester (y compris le violon de @AlexMA) dans IE9, et ce que je vois, c'est que vous pouvez cliquer n'importe où dans le div SAUF sur le texte. Lorsque vous survolez le texte, le curseur se transforme en curseur de texte standard et ne fait rien lorsque vous cliquez sur le texte. Comme les utilisateurs sont enclins à cliquer sur les éléments de texte (et lorsque les éléments de texte remplissent la plupart des div), cela rend cette solution inutilisable dans IE9. Quelqu'un d'autre a-t-il vécu cela ou a-t-il une solution?
bigmac

2
Est-ce que quelqu'un sait comment utiliser: hover css travailler avec cette solution? Peut-être renvoyant la réponse mise au violon?
nktokyo

252

Vous ne pouvez pas faire le divlien lui-même, mais vous pouvez faire en sorte qu'un <a>tag agisse comme un block, le même comportement qu'un <div>a.

a {
    display: block;
}

Vous pouvez ensuite définir la largeur et la hauteur dessus.


11
Cependant, cela ne fait pas d'un «div» un lien. Il fait un lien dans un élément de bloc. C'est un peu différent.
jjnguy

1
C'est la solution de votre problème. Parce que vous pouvez modifier div peut être cliqué comme un lien hypertexte, mais vous ne pouvez pas définir le curseur (= main) pour l'affichage dans tous les navigateurs (seul IE le supporte!).
Soul_Master

3
jjnguy: Comment? Je n'aime pas avoir beaucoup de contenu dans un lien, mais cela pourrait tout aussi bien faire partie d'un menu de navigation ou quelque chose comme ça. Un élément d'ancrage (<a>) ne doit pas nécessairement être du texte brut, n'est-ce pas? De quelle manière est-il mal d'en faire un bloc? Il est sémantiquement correct et peut être utilisé pour l'afficher comme vous le souhaitez.
Arve Systad

23
Il s'agit d'une solution parfaitement valable à une question vague. En fait, vous POUVEZ simplement enrouler un élément d'ancrage autour d'un div, mais ce serait sémantiquement incorrect. (Élément de bloc dans l'élément en ligne).
Traingamer

3
jjnguy: C'est une pratique assez courante. Je ne dis pas remplacer les divs par des liens, mais par les sons de la question, il voulait juste un bloc sur lequel il pouvait cliquer comme un bouton ou quelque chose.
Soviut

72

C'est une question ancienne, mais j'ai pensé y répondre car tout le monde ici a des solutions folles. C'est en fait très très simple ...

Une balise d'ancrage fonctionne comme ceci -

<a href="whatever you want"> EVERYTHING IN HERE TURNS INTO A LINK </a>

Sooo ...

<a href="whatever you want"> <div id="thediv" /> </a>

Bien que je ne sois pas sûr que ce soit valide. Si tel est le raisonnement derrière les solutions parlées, alors je m'excuse ...


6
C'est du HTML valide tant <div>qu'il ne contient aucun contenu interactif (autres <a>éléments, <button>éléments, etc.).

50
Votre exemple n'est pas HTML valide - élément de bloc contenu dans un élément en ligne - sauf si vous utilisez HTML5, qui a fait une exception pour les liens.
thepeer

1
C'est un mauvais exemple, car ce que fait la abalise, c'est de prendre tout le texte dans un divet le souligne ... cela peut être atténué avec le style, mais la meilleure réponse est meilleure.
Dmitri Nesteruk

2
a #thediv{font-weight:normal;text-decoration:none;}est tout ce dont vous avez besoin en termes de style.
tyjkenn

1
J'ai essayé cela et cela a fonctionné, mais cela a brisé le positionnement de l'élément. Oui, doctype est HTML5 dans Chrome (une version de 2014) ..
BAR

60

Nécessite un peu de javascript. Mais, votre divserait cliquable.

<div onclick="location.href='http://www.example.com';" style="cursor:pointer;"></div>

9
Cela entraîne cependant une mauvaise sémantique sur la page, donc j'éviterais celle-ci même si c'est techniquement possible.
Arve Systad

2
J'ai pensé à utiliser cette solution, mais c'est un peu moche. J'aime les solutions d'affichage: mieux bloquer.
allyourcode

9
Cela ressemble à un lien, mais ce n'est pas un vrai lien. Il présente de graves problèmes d'utilisation et d'accessibilité, et est une solution vraiment désagréable.
WhyNotHugo

2
Meilleure solution. Nous avons juste besoin d'exécuter le script et de lui envoyer "this".
Arman Hayots

3
S'ils n'ont pas activé js, vous avez perdu des fonctionnalités. En plus d'être mauvais pour le référencement.
BAR du

40

Cette option ne nécessite pas de vide.gif comme dans la réponse la plus votée:

HTML:

 <div class="feature">
       <a href="http://www.example.com"></a>
 </div>

CSS:

 div.feature {
        position: relative;
    }

    div.feature a {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-decoration: none; /* No underlines on the link */
        z-index: 10; /* Places the link above everything else in the div */
        background-color: #FFF; /* Fix to make div clickable in IE */
        opacity: 0; /* Fix to make div clickable in IE */
        filter: alpha(opacity=1); /* Fix to make div clickable in IE */
    }

Comme proposé sur http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/


1
Merci! La solution de Chris Jumonville fonctionne très bien sur Andriod et iPhone. Exemple: gastateparks.org/specials
Loren

1
Cela ne devrait-il pas être div.feature > ajuste au cas où la partie "tout le reste" contient également un lien caché au fond?
TWiStErRob

cela devrait être la réponse choisie, fonctionne aussi avec le bootstrap
Anthony Kal

23

Il s'agit d'une solution "valable" pour réaliser ce que vous voulez.

<style type="text/css">
.myspan {
    display: block;
}
</style>
<a href="#"><span class="myspan">text</span></a>

Mais le plus probable, ce que vous voulez vraiment, c'est d'avoir une <a>balise affichée en tant qu'élément de niveau bloc.

Je ne conseillerais pas d'utiliser JavaScript pour simuler un lien hypertexte car cela va à l'encontre du but de la validation du balisage, qui est finalement de promouvoir l'accessibilité (la publication de documents bien formés suivant des règles sémantiques appropriées minimise la possibilité qu'un même document soit interprété différemment par différents navigateurs).

Il serait préférable de publier une page Web qui ne valide pas, mais s'affiche et fonctionne correctement sur tous les navigateurs , y compris ceux avec JavaScript désactivé. En outre, l'utilisation onclickne fournit pas les informations sémantiques à un lecteur d'écran pour déterminer que la div fonctionne comme un lien.


14

La manière la plus propre serait d'utiliser jQuery avec les balises de données introduites en HTML. Avec cette solution, vous pouvez créer un lien sur chaque balise que vous souhaitez. Définissez d'abord la balise (par exemple, div) avec une balise de liaison de données:

<div data-link="http://www.google.at/">Some content in the div which is arbitrary</div>

Vous pouvez maintenant styliser le div comme vous le souhaitez. Et vous devez également créer le style pour le comportement de type "lien":

[data-link] {
  cursor: pointer;
}

Et enfin mettez cet appel jQuery à la page:

$(document).ready(function() {
  $("[data-link]").click(function() {
    window.location.href = $(this).attr("data-link");
    return false;
  });
});

Avec ce code, jQuery applique un écouteur de clics à chaque balise de la page qui a un attribut "liaison de données" et redirige vers l'URL qui se trouve dans l'attribut de liaison de données.


Pour obtenir des informations sur les attributs de données, voir: ejohn.org/blog/html-5-data-attributes
Erhard Dinhobl

13

Je ne sais pas si cela est valide mais cela a fonctionné pour moi.

Le code :

<div style='position:relative;background-color:#000000;width:600px;height:30px;border:solid;'>
  <p style='display:inline;color:#ffffff;float:left;'> Whatever </p>     
  <a style='position:absolute;top:0px;left:0px;width:100%;height:100%;display:inline;' href ='#'></a>
</div>


9

Pour que la réponse du peintre fonctionne dans IE 7 et versions ultérieures, il a besoin de quelques ajustements.

  1. IE n'honorera pas l'index z si l'élément n'a pas de couleur d'arrière-plan, donc le lien ne chevauchera pas les parties de la div contenant qui a du contenu, seulement les parties vides. Pour résoudre ce problème, un arrière-plan est ajouté avec l'opacité 0.

  2. Pour une raison quelconque, IE7 et divers modes de compatibilité échouent complètement lors de l'utilisation de la portée dans une approche de lien. Cependant, si le lien lui-même reçoit le style, il fonctionne très bien.

.blockLink  
{  
    position:absolute;  
    top:0;  
    left: 0;  
    width:100%;  
    height:100%;  
    z-index: 1;  
    background-color:#ffffff;   
    -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";  
    filter: alpha(opacity=0);  
    opacity:0;  
}
<div style="position:relative">  
    <some content>  
    <a href="somepage" class="blockLink" />  
<div>

8

vous pouvez également essayer d'envelopper une ancre, puis de tourner sa hauteur et sa largeur pour qu'elles soient identiques à celles de son parent. Cela fonctionne parfaitement pour moi.

<div id="css_ID">
    <a href="http://www.your_link.com" style="display:block; height:100%; width:100%;"></a>
</div>

1
Vous pouvez également vous assurer que le div parent a un remplissage nul et que la balise <a> a une marge nulle.
Nilpo

4

pourquoi pas? use <a href="bla"> <div></div> </a>fonctionne bien en HTML5


Il ne passera pas la validation HTML. L'élément de campagne ne peut pas stocker les éléments de bloc.
Krzysztof Trzos

Je veux dire, c'est <div><span></span></div>valable et <span><div></div></span>ne l'est pas. Vous ne devez pas mettre le display: inline;type d'éléments dans les display: block;éléments. La <a>balise est une boîte en ligne.
Krzysztof Trzos

Oui, cela peut fonctionner, car vous pouvez le faire de plusieurs manières (meilleures ou pires). Cette solution particulière n'est pas bonne car l'ancienne validation HTML :).
Krzysztof Trzos

1
Est-il important que «la validation HTML plus ancienne» ne passe pas cela? Il est autorisé maintenant, html5 et pour une raison alors pourquoi ne pas l'utiliser? Je pense que cette solution est très bien (elle nécessite souvent la suppression du soulignement au contenu div mais quand même).
Todilo

@Todilo Parce que while <a><div></div></a>est valide et fonctionne, <a><div><a></a></div></a>n'est pas valide et ne fonctionne pas.
coredumperror

3

Ce message est ancien, je sais, mais je devais juste résoudre le même problème parce que le simple fait d'écrire une balise de lien normale avec l'affichage réglé sur block ne rend pas la div entière cliquable dans IE. donc pour résoudre ce problème beaucoup plus simple que d'avoir à utiliser JQuery.

Tout d'abord, laissez-nous comprendre pourquoi cela se produit: IE ne rendra pas un div vide cliquable, il ne fera que le texte / l'image dans ce div / une balise cliquable.

Solution: remplissez le div avec une image bakground et cachez-la au spectateur.

Comment? Vous posez de bonnes questions, écoutez maintenant. ajouter ce style d'arrière-plan à la balise a

> "background:url('some_small_image_path')
> -2000px -2000px no-repeat;"

Et voilà, tout le div est maintenant cliquable. C'était le meilleur moyen pour moi car je l'utilisais pour ma galerie de photos pour permettre à l'utilisateur de cliquer sur une moitié de l'image pour se déplacer vers la gauche / droite, puis de placer une petite image également pour les effets visuels. donc pour moi j'ai quand même utilisé les images gauche et droite comme images de fond!


Merci! J'avais besoin de simuler un imagemap avec des ancres vides sur une image et IE ne vous laisserait cliquer que s'il y avait du contenu. Cela l'a corrigé.
MDCore

2

Ayez simplement le lien dans le bloc et améliorez-le avec jquery. Il se dégrade gracieusement à 100% pour toute personne sans javascript. Faire cela avec html n'est pas vraiment la meilleure solution à mon humble avis. Par exemple:

<div id="div_link">
<h2><a href="mylink.htm">The Link and Headline</a></h2>
<p>Some more stuff and maybe another <a href="mylink.htm">link</a>.</p>
</div>

Utilisez ensuite jquery pour rendre le bloc cliquable (via le mur du concepteur Web ):

$(document).ready(function(){

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

});

Ensuite, tout ce que vous avez à faire est d'ajouter des styles de curseur à la div

    #div_link:hover {cursor: pointer;}

Pour les points bonus, n'appliquez ces styles que si javascript est activé en ajoutant une classe 'js_enabled' à la div, au corps ou autre.


je veux l'utiliser mais j'ai 2 liens dans la div ... comment puis-je le modifier pour pouvoir cliquer sur les deux liens? (il me faut actuellement "mylink.html" si je clique aussi sur le deuxième lien ..)
m3tsys

2

Cet exemple a fonctionné pour moi:

<div style="position: relative; width:191px; height:83px;">
    <a href="link.php" style="display:block; width:100%; height:100%;"></a>
</div>

2

Cela a fonctionné pour moi:

HTML:

<div>

  WHATEVER YOU WANT

  <a href="YOUR LINK HERE">
    <span class="span-link"></span>
  </a>

</div>

CSS:

.span-link {
  position:absolute;
  width:100%;
  height:100%;
  top:0;
  left: 0;
  z-index: 9999;
}

Cela ajoute un élément invisible (le span), qui couvre votre div entier, et est au - dessus de votre div entier sur l'index z, donc quand quelqu'un clique sur ce div, le clic est essentiellement intercepté par votre couche "span" invisible, qui est lié.

Remarque: Si vous utilisez déjà des z-index pour d'autres éléments, assurez-vous simplement que la valeur de ce z-index est supérieure à tout ce dont vous voulez qu'il repose "au-dessus" de.


A travaillé pour moi. N'oubliez pas de positionner relativement l'élément parent.
Saif Al Falah

1

En fait, vous devez inclure le code JavaScript pour le moment, consultez ce tutoriel pour le faire.

mais il existe un moyen difficile d'y parvenir en utilisant un code CSS, vous devez imbriquer une balise d'ancrage à l'intérieur de votre balise div et vous devez lui appliquer cette propriété,

display:block;

lorsque vous avez fait cela, cela rendra toute la zone de largeur cliquable (mais dans la hauteur de la balise d'ancrage), si vous voulez couvrir toute la zone div, vous devez définir la hauteur de la balise d'ancrage exactement à la hauteur de la balise div, par exemple:

height:60px;

ça va rendre toute la zone cliquable, alors vous pouvez appliquer text-indent:-9999px une balise d'ancrage pour atteindre l'objectif.

c'est vraiment délicat et simple et il vient d'être créé en utilisant du code CSS.

voici un exemple : http://jsfiddle.net/hbirjand/RG8wW/


1

C'est le meilleur moyen de le faire tel qu'il est utilisé sur le site Web de la BBC et le Guardian:

J'ai trouvé la technique ici: http://codepen.io/IschaGast/pen/Qjxpxo

voici le html

<div class="highlight block-link">
      <h2>I am an example header</h2>
      <p><a href="pageone" class="block-link__overlay-link">This entire box</a> links somewhere, thanks to faux block links. I am some example text with a <a href="pagetwo">custom link</a> that sits within the block</p>

</div>

voici le CSS

/**
 * Block Link
 *
 * A Faux block-level link. Used for when you need a block-level link with
 * clickable areas within it as directly nesting a tags breaks things.
 */


.block-link {
    position: relative;
}

.block-link a {
  position: relative;
  z-index: 1;
}

.block-link .block-link__overlay-link {
    position: static;
    &:before {
      bottom: 0;
      content: "";
      left: 0;
      overflow: hidden;
      position: absolute;
      right: 0;
      top: 0;
      white-space: nowrap;
      z-index: 0;
    }
    &:hover,
    &:focus {
      &:before {
        background: rgba(255,255,0, .2);
      }
    }
}


0

Ce travail pour moi:

<div onclick="location.href='page.html';"  style="cursor:pointer;">...</div>

0

Vous pouvez donner un lien vers votre div par la méthode suivante:

<div class="boxdiv" onClick="window.location.href='https://www.google.co.in/'">google</div>
<style type="text/css">
.boxdiv {
    cursor:pointer;
    width:200px;
    height:200px;
    background-color:#FF0000;
    color:#fff;
    text-align:center;
    font:13px/17px Arial, Helvetica, sans-serif;
    }
</style>

0

Vous pouvez faire entourer l'élément avec des balises href ou vous pouvez utiliser jquery et utiliser

$('').click(function(e){
e.preventDefault();
//DO SOMETHING
});

0

C'est le moyen le plus simple.

Dis, c'est le divbloc que je veux rendre cliquable:

<div class="inner_headL"></div>

Mettez donc un hrefcomme suit:

<a href="#">
 <div class="inner_headL"></div>
</a>

Considérez simplement le divbloc comme un élément html normal et activez la hrefbalise a habituelle .
Cela fonctionne au moins sur FF.


0

Bien que je ne recommande pas de le faire en aucune circonstance, voici un code qui transforme un DIV en lien (remarque: cet exemple utilise jQuery et certaines balises sont supprimées pour plus de simplicité):

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript">

$(document).ready(function() {
    $("div[href]").click(function () {
        window.location = $(this).attr("href");
    });
});

</script>
<div href="http://www.google.com">
     My Div Link
</div>

3
Encore une fois, c'est une solution fonctionnelle, mais pas vraiment dans l'esprit de la question d'origine qui était pour une solution XHTML. Sans une affaire énorme, votre réponse ne commence à ajouter du bruit à la question.
Soviut

0

Une option qui n'a pas été mentionnée utilise flex. En appliquant flex: 1à la abalise, elle se développe pour s'adapter au conteneur.

div {
  height: 100px;
  width: 100px;
  display: flex;
  border: 1px solid;
}

a {
  flex: 1;
}
<div>
  <a href="http://google.co.uk">Link</a>
</div>


-1

J'ai ajouté une variable car certaines valeurs de mon lien changeront en fonction de l'enregistrement dont l'utilisateur provient. Cela a fonctionné pour les tests:

   <div onclick="location.href='page.html';"  style="cursor:pointer;">...</div> 

et cela fonctionne aussi:

   <div onclick="location.href='<%=Webpage%>';"  style="cursor:pointer;">...</div> 

1
le code ne s'affiche pas pour une raison quelconque, j'ai utilisé le onclick avec une variable jsp à l'intérieur pour créer un lien dynamique
becky

-3

Mon pantalon smarty répond:

"Réponse évasive à:" Comment faire de l'élément de niveau bloc un lien hypertexte et valider dans XHTML 1.1 "

Utilisez simplement la DTD HTML5 DOCTYPE. "

N'était pas vrai pour ie7

onclick="location.href='page.html';"

Fonctionne IE7-9, Chrome, Safari, Firefox,


il cherchait "Je recherche une voie XHTML 1.1 valide"
Mark

-4

si tout pouvait être aussi simple ...

#logo {background:url(../global_images/csg-4b15a4b83d966.png) no-repeat top left;background-position:0 -825px;float:left;height:48px;position:relative;width:112px}

#logo a {padding-top:48px; display:block;}



<div id="logo"><a href="../../index.html"></a></div>

pensez juste un peu en dehors de la boîte ;-)

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.