Heim  >  Artikel  >  Web-Frontend  >  Wie erstelle ich anklickbare Divs ohne JavaScript?

Wie erstelle ich anklickbare Divs ohne JavaScript?

Linda Hamilton
Linda HamiltonOriginal
2024-11-10 10:02:02908Durchsuche

How to Create Clickable Divs Without JavaScript?

Anklickbare Divs ohne JavaScript

Das Erstellen eines anklickbaren Divs ohne JavaScript stellt eine Herausforderung dar, da Blockelemente wie Divs nicht in Inline-Elementen wie platziert werden können Anker. Um dies zu überwinden, besteht ein cleverer Ansatz darin, CSS zu verwenden, um die Illusion eines anklickbaren Div zu erzeugen.

Lösung mit CSS und HTML

  1. CSS:

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

    Dieses CSS definiert ein Div mit fester Größe (#my-div) mit a roter Hintergrund. Es definiert auch ein Ankerelement (a.fill-div), das das gesamte Div einnimmt.

  2. HTML:

    <div>

    The HTML erstellt ein Div mit der ID „my-div“ und ein darin enthaltenes Ankerelement mit der Klasse „fill-div“. Da das Ankerelement das gesamte Div einnimmt, wird durch Klicken auf eine beliebige Stelle im Div der href-Link des Ankers aktiviert.

Durch die Kombination dieser CSS- und HTML-Elemente können Sie ein ganzes Div anklickbar machen das Erscheinungsbild eines anklickbaren Div ohne die Verwendung von JavaScript.

Das obige ist der detaillierte Inhalt vonWie erstelle ich anklickbare Divs ohne JavaScript?. 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