web-dev-qa-db-fra.com

Faire une div en un lien

J'ai un bloc <div> avec un contenu visuel sophistiqué 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 valide XHTML 1.1.

csshtmlxhtmlanchor
522
EE.

Je suis venu ici dans l’espoir de trouver une meilleure solution que la mienne, mais je n’aime aucune de celles proposées ici. Je pense que certains d'entre vous ont mal compris la question. Le PO veut faire en sorte qu'une div pleine de contenu se comporte comme un lien. Un exemple de ceci serait les annonces sur 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 un très mauvais référencement/accessibilité); HTML invalide.

En substance c'est ça:

  • Construisez votre panneau en utilisant les techniques CSS normales et un code HTML valide.
  • Quelque part, placez un lien que vous souhaitez définir comme 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)
  • donne 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 dans une balise <A>, c'est un lien cliquable

  • donnez tous les autres liens à l'intérieur de la position du panneau: relatifs et un indice z approprié (> 1) pour les amener devant le lien d'étendue par défaut
719
thepeer

Vous ne pouvez pas faire de la div un lien en soi, mais vous pouvez faire en sorte qu'une balise <a> 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.

248
Soviut

C'est une question ancienne, mais je pensais 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 si cela est valide. Si c'est le raisonnement derrière les solutions parlées, alors je m'excuse ...

66
Zizo47

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

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

Cette option ne nécessite pas de empty.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é à l'adresse http://www.digitalskydesign.com/how-to-make-an-entire-div-a-link-using-css/

36
MagTun

C'est 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 est que vous souhaitiez réellement que la balise <a> soit affichée en tant qu'élément de niveau bloc.

Je ne conseillerais pas d'utiliser JavaScript pour simuler un lien hypertexte car cela irait à l'encontre de la validation par balisage, qui consiste en définitive à promouvoir l'accessibilité (la publication de documents bien formés en respectant les 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 rend et fonctionne correctement sur tous les navigateurs, y compris ceux avec JavaScript désactivé. De plus, l'utilisation de onclick ne fournit pas les informations sémantiques permettant à un lecteur d'écran de déterminer que la div fonctionne comme un lien.

23
Calvin

Je ne sais pas si cela est valable, 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>
13
Tim

Le moyen le 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 souhaitée. Commencez par définir 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 nommer la div comme vous le souhaitez. Et vous devez également créer le style du comportement "link":

[data-link] {
  cursor: pointer;
}

Et enfin, mettez cet appel jQuery sur 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 clic à chaque balise de la page ayant un attribut "data-link" et redirige vers l'URL qui se trouve dans l'attribut data-link.

11
Erhard Dinhobl

Pour que la réponse du correspondant fonctionne dans IE 7 et dans les prochaines étapes, quelques ajustements sont nécessaires.

  1. IE n'honorera pas z-index si l'élément n'a pas de couleur d'arrière-plan. Par conséquent, le lien ne chevauchera pas les parties de la div qui contient le contenu, mais uniquement 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 l'intervalle dans une approche de lien. Cependant, si le lien lui-même prend le style, cela 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>
9
Thomas Scheelhardt

vous pouvez également essayer d’emballer une ancre, puis de lui donner la même hauteur que 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>
8
wdonayredroid

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

4
Vamsi Pavan Mahesh

Je sais que ce message est ancien, mais je viens de résoudre le même problème, car écrire une balise de lien normale avec le jeu d’affichage à bloquer 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, comprenons pourquoi cela se produit: IE ne rendra pas un div vide cliquable, il ne fera que rendre le texte/image de ce div/une balise cliquable.

Solution: Remplissez la div avec une image bakground et masquez-la de la visionneuse.

Comment? Vous posez de bonnes questions, écoutez maintenant. ajouter ce style de backround à la balise

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

Et voilà, toute la 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 qu’il se déplace vers la gauche/la droite, puis de placer une petite image également pour obtenir des effets visuels. donc pour moi j'ai quand même utilisé les images gauche et droite comme images de fond!

3
Drake

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 l’ensemble de votre div et est ci-dessus tout votre div sur l’index z. Ainsi, lorsque quelqu'un clique sur ce div, le clic est essentiellement intercepté par votre couche "span" invisible, qui est liée.

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

2
Jeff Schwarting

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
joan16v

Il suffit d’avoir le lien dans le bloc et de l’améliorer avec jQuery. Il dégrade 100% gracieusement pour quiconque sans javascript. Faire cela avec le langage 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>

Ensuite, utilisez jquery pour rendre le bloc cliquable (via mur du concepteur Web ):

$(document).ready(function(){

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

});

Il ne reste plus qu’à ajouter des styles de curseur à la div

    #div_link:hover {cursor: pointer;}

Pour les points bonus, appliquez ces styles uniquement si le javascript est activé en ajoutant une classe 'js_enabled' à la div, ou au corps, ou à un autre résultat.

2
Justin

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

mais il existe un moyen délicat d’atteindre cet objectif en utilisant un code CSS: vous devez imbriquer une balise anchor dans votre balise div et vous devez lui appliquer cette propriété,

display:block;

lorsque vous aurez terminé, la zone de largeur entière sera cliquable (mais dans la hauteur de la balise d'ancrage). Si vous souhaitez couvrir toute la zone div, vous devez définir la hauteur de la balise d'ancrage exactement à la hauteur du balise div, par exemple:

height:60px;

cela va rendre la zone entière cliquable, alors vous pouvez appliquer text-indent:-9999px à la balise d'ancrage pour atteindre l'objectif.

c'est vraiment simple et c'est compliqué et ça vient d'être créé en utilisant du code CSS.

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

1
Hbirjand
<a href="…" style="cursor: pointer;"><div> … </div></a>
1
Phillip Chaffee

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

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

Bien que je ne recommande en aucun cas de le faire, voici un code qui transforme une DIV en lien (remarque: cet exemple utilise jQuery et certaines balises sont supprimées pour des raisons 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>
0
Brian David Berman

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

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

heres 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>

heres 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
jojojohn

Vous pouvez donner un lien vers votre div en utilisant 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
Swarnamayee Mallia

Ce travail pour moi:

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

C'est le moyen le plus simple.

Disons que c’est le bloc div que je veux rendre cliquable:

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

Mettez donc un href comme suit:

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

Il suffit de considérer le bloc div comme un élément HTML normal et d’activer la balise habituelle href.
Cela fonctionne au moins sur FF.

0
jeevanism