Comment rendre un « div » cliquable sans utiliser JavaScript ?

Créer un 'div' cliquable sans JavaScript

Rendre un élément 'div' cliquable implique souvent l'utilisation de JavaScript, mais il existe du HTML et du CSS techniques qui peuvent obtenir cet effet sans scripts. L'une de ces méthodes consiste à entourer le « div » dans une balise d'ancrage, comme le montre le code suivant :

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

Cependant, le validateur HTML met en garde contre le placement d'éléments de bloc (comme « div ») dans des éléments en ligne. (comme 'un'). Une meilleure approche consiste à créer une règle CSS qui fait qu'un lien (balise d'ancrage) remplit l'intégralité du « div » :

CSS :

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

HTML :

<div>

Cette technique utilise une combinaison de HTML et de CSS pour créer un « div » cliquable qui contourne le besoin de JavaScript. En enfermant le « div » dans une balise d'ancrage et en appliquant du CSS qui remplit l'élément « a » aux dimensions du « div », l'ensemble du « div » devient un lien cliquable.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!