Heim >Web-Frontend >CSS-Tutorial >Wie mache ich ein ganzes Div ohne JavaScript anklickbar?

Wie mache ich ein ganzes Div ohne JavaScript anklickbar?

DDD
DDDOriginal
2024-11-09 19:37:02502Durchsuche

How to Make an Entire Div Clickable Without JavaScript?

Mit HTML und CSS ein ganzes „Div“ anklickbar machen

Sie suchen nach einer Lösung, um ein ganzes „Div“ ohne JavaScript anklickbar zu machen. Das Einschließen von „div“ in „a“-Tags scheint zwar eine praktikable Option zu sein, wirft jedoch Bedenken hinsichtlich der HTML-Validierung auf. Hier ist ein konformerer Ansatz:

Verwenden eines Fill-Div-Links

Erstellen Sie einen Link innerhalb des „div“ und formatieren Sie ihn so, dass er den gesamten „div“-Bereich ausfüllt. Dadurch entsteht die Illusion, dass das „div“ selbst anklickbar ist.

CSS:

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

HTML:

<div>

Indem Sie den Link zu einem Blockelement machen und dessen Höhe und Breite auf 100 % setzen, deckt er den gesamten „div“-Bereich ab. Wenn Sie darauf klicken, wird der Link zur angegebenen Seite weitergeleitet, sodass das „div“ als anklickbar erscheint.

Das obige ist der detaillierte Inhalt vonWie mache ich ein ganzes Div ohne JavaScript anklickbar?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn