149 votes

Comment faire un ensemble ' div ' cliquable en html et css sans javascript ?

Je veux faire en sorte qu’un div tout est cliquable et des liens vers une autre page lorsque vous cliquez dessus avec le code valide et sans javascript.

Si j’ai ce qui est ce que je veux le résultat à faire-

Il est dit que les éléments block ne devrait pas être placés dans un élément inline. Y a-t-il une meilleure façon de le faire ?

162voto

Mario Points 903

Il est possible de faire un lien à remplir l’ensemble div qui donne l’apparence de faire de la div cliquable.

CSS :

HTML :

118voto

Jamshid Hashimi Points 1661
<div onclick="location.href='#';" style="cursor: pointer;">
</div>

97voto

Alex Norcliffe Points 1418

un ensemble div liens vers une autre page quand on clique sans javascript et avec un code valide, est-ce possible?

Pédant réponse: Non.

Comme vous l'avez déjà mis sur un autre commentaire, il est invalide à un nid div à l'intérieur d'un a balise.

Cependant, il n'y a rien qui vous empêche de rendre votre a balise se comportent de façon très similaire à un div, à l'exception que vous ne pouvez pas imbriquer autre bloc balises à l'intérieur. Si elle convient à votre balisage, définissez display:block sur votre a balise et la taille / float cependant que vous aimez.

Si vous revenir sur votre question la prémisse que vous devez éviter de javascript, comme d'autres l'ont fait nos vous pouvez utiliser le gestionnaire d'événement onClick. jQuery est un choix populaire pour faire de ce simple et facile à gérer.

24voto

Sinan Erdem Points 226

Sans JS, je le fais comme ceci :

Mon code HTML :

Mon CSS :

9voto

selfthinker Points 153

L'imbrication des éléments de niveau bloc ancres est pas valide en 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, c'est bien d'utiliser <a href="#"><div></div></a>.

L'on a accepté la réponse est sinon le meilleur. À l'aide de JavaScript, comme d'autres ont suggéré l'est pas parce qu'il ferait "le lien" inaccessible (pour les utilisateurs sans JavaScript, qui comprend les moteurs de recherche et autres).

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X