Wie kann ich Inhalte mit CSS ohne JavaScript ein- und ausblenden?

Inhalte mit CSS ein- und ausblenden: Ein Trick ohne JavaScript

Bei der Arbeit mit der Webentwicklung ist die Kontrolle der Sichtbarkeit von Inhalten oft unerlässlich. Traditionell wird dies mit JavaScript erreicht, aber auch CSS kann verwendet werden, um elegante Ein- und Ausblendeffekte zu erzeugen. Im Folgenden wird eine solche Technik beschrieben, die eine spezifische Herausforderung angeht, die bei früheren Ansätzen aufgetreten ist.

Inhalt ein-/ausblenden:

Man kann CSS verwenden, um einen Inhalt umzuschalten Ermöglicht Benutzern das Ein- und Ausblenden einer Liste von Elementen. Das folgende Snippet demonstriert diese Funktionalität:

<code class="css">#cont {
  display: none;
}
.show:focus + .hide {
  display: inline;
}
.show:focus + .hide + #cont {
  display: block;
}</code>

Die Herausforderung:

Obwohl das obige CSS den gewünschten Effekt erzielt, weist es einen Nachteil auf. Wenn der Inhalt angezeigt wird, kann er durch einfaches Klicken auf eine beliebige Stelle auf der Seite ausgeblendet werden. Dieses Verhalten ist unerwünscht, da wir nur möchten, dass der Inhalt ausgeblendet wird, wenn auf den Link „Ausblenden“ geklickt wird.

Lösung:

Um dieses Problem zu beheben, gehen Sie wie folgt vor Überarbeiteter CSS- und HTML-Code kann verwendet werden:

CSS:

<code class="css">body {
  display: block;
}
.span3:focus ~ .alert {
  display: none;
}
.span2:focus ~ .alert {
  display: block;
}
.alert {
  display: none;
}</code>

HTML:

<code class="html"><span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert">Some alarming information here</p></code>

Mit Aufgrund dieser Änderungen wird die Warnmeldung nur ausgeblendet, wenn auf das Span-Element „Hide Me“ geklickt wird. Diese Lösung löst das Problem effektiv und bietet eine CSS-basierte Methode zum Ausblenden und Anzeigen von Inhalten, ohne auf JavaScript angewiesen zu sein.

Das obige ist der detaillierte Inhalt vonWie kann ich Inhalte mit CSS ohne JavaScript ein- und ausblenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!