So blenden Sie Elemente in CSS ein und aus

In der Webentwicklung ist es oft notwendig, bestimmte Elemente wie Menüs, Eingabeaufforderungsfelder usw. auszublenden oder anzuzeigen. Obwohl JavaScript diese Funktion erreichen kann, möchten wir manchmal nicht zu viele Skripte einführen oder die Browserkompatibilität einschränken. Mit der CSS-Click-to-Show-Hide-Technik können Elemente mithilfe von CSS ohne Verwendung von JavaScript ein- und ausgeblendet werden.

Wie verwende ich die CSS-Click-to-Show-Hide-Technik?

Stellen Sie zunächst das auszublendende Element auf display: none; ein, zum Beispiel:

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

Zweitens fügen Sie einen Auslöser hinzu, z. B. eine Schaltfläche oder einen Link, damit das ausgeblendete Element angezeigt wird, wenn der Benutzer darauf klickt. Um diesen Effekt zu erzielen, müssen Sie die Pseudoklasse :checked und den ~-Geschwisterselektor in CSS verwenden.

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

In diesem Beispiel verwenden wir ein Checkbox-Element als Auslöser. Wenn dieses Kontrollkästchen aktiviert ist, werden ausgeblendete Elemente angezeigt. Dieser Effekt wird durch die Pseudoklasse :checked und den ~-Geschwisterselektor in CSS erreicht. Wenn das Kontrollkästchen aktiviert ist, wird das gleichgeordnete Element #myDiv angezeigt.

Wenn Sie einen Link oder eine Schaltfläche als Auslöser verwenden möchten, können Sie den folgenden Code verwenden:

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

In diesem Beispiel haben wir ein Linkelement als Auslöser verwendet. Wenn der Link den Fokus erhält, wird das verborgene Element angezeigt. Dieser Effekt wird durch die Pseudoklasse :focus und den ~sibling-Selektor in CSS erreicht. Wenn ein Link den Fokus erhält, wird sein gleichgeordnetes Element #myDiv angezeigt.

Sie können auch Beschriftungselemente mit reinem Textinhalt als Auslöser verwenden, indem Sie sie einfach in Beschriftungselemente einschließen und das for-Attribut auf die ID des Elements verweisen, das Sie anzeigen möchten.

Zusammenfassung

Die CSS-Click-to-Show-Hide-Technik ist eine nützliche Methode, mit der Elemente mithilfe von CSS ohne Verwendung von JavaScript ein- und ausgeblendet werden können. Durch die Verwendung der Pseudoklasse :checked und des ~-Geschwisterselektors oder der :focus-Pseudoklasse und des ~-Geschwisterselektors können wir jedem Element ganz einfach eine Click-to-Show-hidden-Funktionalität hinzufügen.

Das obige ist der detaillierte Inhalt vonSo blenden Sie Elemente in CSS ein und aus. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!