Wie mache ich ein „div' anklickbar, ohne JavaScript zu verwenden?

Ein anklickbares „div“ ohne JavaScript erstellen

Um ein „div“-Element anklickbar zu machen, ist oft die Verwendung von JavaScript erforderlich, es gibt jedoch auch HTML und CSS Techniken, die diesen Effekt ohne Skripte erzielen können. Eine solche Methode besteht darin, das „div“ in ein Ankertag einzuschließen, wie im folgenden Code zu sehen ist:

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

Der HTML-Validator warnt jedoch davor, Blockelemente (wie „div“) innerhalb von Inline-Elementen zu platzieren (wie 'a'). Ein besserer Ansatz besteht darin, eine CSS-Regel zu erstellen, die dafür sorgt, dass ein Link (Anker-Tag) das gesamte „div“ ausfüllt:

CSS:

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

HTML:

<div>

Diese Technik verwendet eine Kombination aus HTML und CSS, um ein anklickbares „Div“ zu erstellen, das die Notwendigkeit von JavaScript umgeht. Indem Sie das „div“ in ein Ankertag einschließen und CSS anwenden, das das „a“-Element auf die Abmessungen des „div“ ausfüllt, wird das gesamte „div“ zu einem anklickbaren Link.

Das obige ist der detaillierte Inhalt vonWie mache ich ein „div' anklickbar, ohne JavaScript zu verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!