Comment faire un “div” cliquable en HTML et CSS sans JavaScript?

un div entier lie a une autre page quand clique sans javascript et avec du code valide, est-ce possible?

Réponse pédante: non

Comme vous l’avez déjà fait sur un autre commentaire, il est invalide d’imbriquer une div dans une balise.

Cependant, rien ne vous empêche de faire en sorte que votre balise se comporte de manière très similaire à une div , à ceci près que vous ne pouvez pas imbriquer d’autres balises de bloc à l’intérieur. Si cela convient à votre balisage, définissez l’ display:block votre tag et taillez / flottez comme bon vous semble.

Si vous renoncez à la prémisse de votre question, à savoir que vous devez éviter le javascript, comme d’autres l’ont indiqué, vous pouvez utiliser le gestionnaire d’événements onClick. jQuery est un choix populaire pour rendre ceci facile et maintenable.

Il est possible de faire un lien remplissant l’intégralité de la div, ce qui donne l’apparence de pouvoir cliquer sur le div.

CSS:

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

HTML:

Sans JS, je le fais comme ceci:

Mon HTML:

 
 
Some text here
 
Some other text here
 text of my link  

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. } 

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

HTML:

  buy now
free shipping
no further costs  

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 y a un exemple sur https://www.redracingparts.com/francais/motorbikesmotorcycles/stackoverflow/examples/div/clickable.php

L’imbrication d’éléments de niveau bloc dans les ancres n’est plus invalide 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 devez l’utiliser, mais en HTML5, il est bon d’utiliser

.

La réponse acceptée est sinon la meilleure. Utiliser JavaScript comme les autres suggestions est également mauvais car cela rendrait le “lien” inaccessible (aux utilisateurs sans JavaScript, qui incluent les moteurs de recherche et autres).

jQuery vous permettrait de le faire.

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

Exemple:

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

Eh bien, vous pouvez append des balises et y placer le div, en ajoutant un href si vous voulez que le div agisse comme un lien. Ou bien, utilisez simplement Javascript et définissez une fonction “OnClick”. Mais à partir des informations limitées fournies, il est difficile de déterminer le contexte de votre problème.

 .clickable { cursor:pointer; } 

Quelque chose comme ça?

AFAIK vous aurez besoin d’au moins un peu de JavaScript …

Je suggère d’utiliser jQuery .

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

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

et répondre à l’événement click.

nous utilisons comme ça

   
 option one 
   
 option two  

en utilisant

tag et attraper est avec

 id=1 

J’espère que cela t’aides.