Heim > Web-Frontend > Front-End-Fragen und Antworten > So implementieren Sie die Click-to-Hide-Anzeige in CSS

So implementieren Sie die Click-to-Hide-Anzeige in CSS

PHPz
Freigeben: 2023-04-23 15:15:05
Original
2269 Leute haben es durchsucht

CSS Click to Hide Show

Im heutigen Internetzeitalter hat sich der Schwerpunkt des Webdesigns von der einfachen statischen Anzeige hin zu einem fortschrittlicheren interaktiven Erlebnis verlagert. Unter diesen ist das Ausblenden und Anzeigen eine der am häufigsten verwendeten Interaktionsmethoden. Mit dieser Methode können Benutzer die erforderlichen Informationen bequemer abrufen und redundante Inhalte auf der Seite erheblich reduzieren. In CSS gibt es mehrere Methoden zum Ein- und Ausblenden. In diesem Artikel werden sie einzeln vorgestellt.

  1. Verwenden Sie das Anzeigeattribut

Der Wert des Anzeigeattributs in CSS steuert, ob das Element angezeigt oder ausgeblendet wird. Zu den Werten gehören:

  • none: Das Element wird vollständig von der Seite entfernt und ist für das Layout vollständig unsichtbar.
  • Block: Das Element wird als Element auf Blockebene angezeigt, d. h. es nimmt eine ganze Zeile ein.
  • inline: Das Element wird als Inline-Element angezeigt, d. h. es nimmt den gleichen Platz ein wie der Text.
  • inline-block: Das Element wird als Inline-Element angezeigt, es können jedoch Attribute wie Breite und Höhe festgelegt werden.

Mithilfe des Anzeigeattributs können wir das Anzeigeattribut des Elements ausblenden und anzeigen. Der Beispielcode lautet wie folgt:

HTML-Code : #🎜🎜 #

<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren
CSS-Code:

.box {
  display: none;
}
Nach dem Login kopieren
JavaScript-Code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  if(box.style.display === "none") {
    box.style.display = "block";
  } else {
    box.style.display = "none";
  }
});
Nach dem Login kopieren
    Verwenden Sie das Deckkraftattribut
  1. #🎜 🎜#
  2. opacity Eigenschaften steuern die Transparenz eines Elements, um es auszublenden oder anzuzeigen. Wenn die Opazitätseigenschaft auf 0 gesetzt ist, ist das Element vollständig transparent und kann daher nicht gesehen werden. Wenn die Opazitätseigenschaft 1 ist, ist sie vollständig sichtbar. Aber es wird immer noch seinen Platz auf der Seite einnehmen. #🎜🎜 ## 🎜🎜#HTML -Code:
#
<div class="box">
  <p>隐藏的内容</p>
</div>
<button id="toggle">显示/隐藏</button>
Nach dem Login kopieren
Nach dem Login kopieren
Nach dem Login kopieren

#CSS -Code:

.box {
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  pointer-events: none;
}

.box.show {
  opacity: 1;
  pointer-events: auto;
}
Nach dem Login kopieren

#JavaScript Code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});
Nach dem Login kopieren
Nach dem Login kopieren
#🎜🎜 ## 🎜🎜##Sichtbarkeit verwenden Attribut

Das Sichtbarkeitsattribut steuert, ob das Element ausgeblendet ist, aber dennoch seinen Platz behält, es entfernt das Element nicht vollständig von der Seite. Wenn die Sichtbarkeitseigenschaft auf „verborgen“ gesetzt ist, wird das Element ausgeblendet, nimmt aber dennoch seinen Platz auf der Seite ein. Wenn die Sichtbarkeitseigenschaft sichtbar ist, ist sie vollständig sichtbar.

    HTML-Code:
  1. <div class="box">
      <p>隐藏的内容</p>
    </div>
    <button id="toggle">显示/隐藏</button>
    Nach dem Login kopieren
    Nach dem Login kopieren
    Nach dem Login kopieren
  2. CSS-Code:
.box {
  visibility: hidden;
}

.box.show {
  visibility: visible;
}
Nach dem Login kopieren

JavaScript-Code:

document.getElementById("toggle").addEventListener("click", function() {
  var box = document.querySelector(".box");
  box.classList.toggle("show");
});
Nach dem Login kopieren
Nach dem Login kopieren

Zusammenfassend, unabhängig von der Oben: Unabhängig davon, ob es sich um Anzeige-, Deckkraft- oder Sichtbarkeitsattribute handelt, können sie alle den Effekt des Ausblendens und Anzeigens erzielen. Jede dieser drei Methoden hat ihre eigenen Vor- und Nachteile, und wir können die geeignete Methode entsprechend den tatsächlichen Anforderungen auswählen.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die Click-to-Hide-Anzeige in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage