Maison  >  Article  >  interface Web  >  Comment créer des Divs cliquables sans JavaScript ?

Comment créer des Divs cliquables sans JavaScript ?

Linda Hamilton
Linda Hamiltonoriginal
2024-11-10 10:02:02885parcourir

How to Create Clickable Divs Without JavaScript?

Divs cliquables sans JavaScript

Créer un div cliquable sans JavaScript pose un défi, car les éléments de bloc comme les divs ne peuvent pas être placés dans des éléments en ligne comme ancres. Pour pallier à cela, une approche astucieuse consiste à utiliser CSS pour créer l'illusion d'un div cliquable.

Solution utilisant CSS et HTML

  1. CSS :

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

    Ce CSS définit un div de taille fixe (#my-div) avec un fond rouge. Il définit également un élément d'ancrage (a.fill-div) qui occupera la totalité du div.

  2. HTML :

    <div>

    Le HTML crée un div avec un ID « my-div » et un élément d'ancrage à l'intérieur avec une classe « fill-div ». Étant donné que l'élément d'ancrage occupe la totalité du div, cliquer n'importe où dans le div activera le lien href de l'ancre.

En combinant ces éléments CSS et HTML, vous pouvez rendre un div entier cliquable, ce qui donne l'apparition d'un div cliquable sans utilisation de JavaScript.

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!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn