web-dev-qa-db-fra.com

Comment faire un "div" entier cliquable en html et css sans JavaScript?

Je veux faire en sorte que toute une div est cliquable et des liens vers une autre page lorsque vous cliquez dessus sans JavaScript et avec un code/balisage valide.

Si j'ai ce qui est ce que je veux que le résultat fasse -

<a href="#">
<div>This is a link</div>
</a>

Le validateur W3C dit que les éléments de bloc ne doivent pas être placés dans un élément en ligne. Y a-t-il une meilleure manière de faire cela?

htmlcssclick
119
Andy Lobel

une div entière est liée à une autre page lorsque vous cliquez dessus sans JavaScript et avec un code valide, est-ce possible?

Réponse pédante: non.

Comme vous avez déjà mis un autre commentaire, imbriquer une div dans une balise a n'est pas valide.

Cependant, rien ne vous empêche de faire en sorte que votre balise a se comporte de manière très similaire à un div, à l'exception que vous ne pouvez pas imbriquer d'autres balises de bloc à l'intérieur. Si cela vous convient, définissez display:block sur votre balise a et ajustez-le à la taille désirée.

Si vous ne tenez pas compte du principe de votre question, à savoir que vous devez éviter le javascript, comme d'autres l'ont souligné, vous pouvez utiliser le gestionnaire d'événements onClick. jQuery est un choix populaire pour rendre ceci facile et facile à maintenir.

84
Alex Norcliffe

Il est possible de faire un lien remplissant la div entière qui donne l’impression de rendre la div cliquable.

CSS:

#my-div {
    background-color: #f00;
    width: 200px;
    height: 200px;
}
a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

HTML:

<div id="my-div">
    <a href="#" class="fill-div"></a>
</div>
141
Mario
<div onclick="location.href='#';" style="cursor: pointer;">
</div>
78
Jamshid Hashimi

Sans JS, je le fais comme ça:

Mon HTML:

<div class="container">
  <div class="sometext">Some text here</div>
  <div class="someothertext">Some other text here</div>
  <a href="#" class="mylink">text of my link</a>
</div>

Mon CSS:

.container{
  position: relative;
}

.container.a{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-indent: -9999px; //these two lines are to hide my actual link text.
  overflow: hidden; //these two lines are to hide my actual link text.
}
21
Sinan Erdem

Ma solution sans JavaScript/images. Seulement CSS utilisé. Cela fonctionne dans tous les navigateurs.

HTML: 

<a class="add_to_cart" href="https://www.redracingparts.com" title="Add to Cart!">
  buy now<br />free shipping<br />no further costs
</a>

CSS: 

.add_to_cart:hover {
  background-color:#FF9933;
  text-decoration:none;
  color:#FFFFFF;
}

.add_to_cart {
  cursor:pointer;
  background-color:#EC5500;
  display:block;
  text-align:center;
  margin-top:8px;
  width:90px;
  height:31px;
  border-radius:5px;
  border-width:1px;
  border-style:solid;
  border-color:#E70000;
}

Il existe un exemple sur https://www.redracingparts.com/english/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

10
John

L'imbrication d'éléments de niveau bloc dans les ancres est non valide dans HTML5 . Voir http://html5doctor.com/block-level-links-in-html-5/ et http://www.w3.org/TR/html5/the-a -element.html . Je ne dis pas que vous devriez l'utiliser, mais en HTML5, il est bien d'utiliser <a href="#"><div></div></a>.

La réponse acceptée est sinon la meilleure. Utiliser JavaScript comme le suggère d'autres est également mauvais car cela rendrait le "lien" inaccessible (aux utilisateurs sans JavaScript, qui inclut les moteurs de recherche et autres).

8
selfthinker

jQuery vous permettrait de le faire.

Recherchez la fonction click(): http://api.jquery.com/click/

Exemple:

$('#yourDIV').click(function() {
  alert('You clicked the DIV.');
});
5
Josh Foskett

Vous pouvez aussi bien ajouter des balises <a></a> et y placer la div, en ajoutant un href si vous souhaitez que la div fasse office de lien. Ou bien, utilisez simplement Javascript et définissez une fonction 'OnClick'. Mais, à partir des informations limitées fournies, il est un peu difficile de déterminer le contexte de votre problème.

3
Dot NET
.clickable {
  cursor:pointer;
}
2
Bruno

Autant que je sache, vous aurez besoin d'au moins un peu de JavaScript ...

Je suggère d'utiliser jQuery .

Vous pouvez inclure cette bibliothèque sur une ligne. Et puis vous pouvez accéder à votre div avec

$('div').click(function(){
  // do stuff here
});

et répondez à l'événement click.

0
Sebastian Oberste-Vorth

nous utilisons comme ça

     <label for="1">
<div class="options">
<input type="radio" name="mem" id="1" value="1" checked="checked"/>option one
    </div>
</label>
   <label for="2"> 
<div class="options">
 <input type="radio" name="mem" id="2" value="1" checked="checked"/>option two
</div></label>

en utilisant

  <label for="1">

tag et capture est avec

id=1

j'espère que cela t'aides.

0
AMB

Quelque chose comme ça?

<div onclick="alert('test');">

</div>
0
Tys