Heim > Web-Frontend > CSS-Tutorial > Wie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?

Wie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?

Patricia Arquette
Freigeben: 2024-12-18 01:20:10
Original
969 Leute haben es durchsucht

How to Show and Hide a DIV Element with a Button Click?

Wie schalte ich die Sichtbarkeit eines DIV mithilfe einer Schaltfläche um?

Viele Webanwendungen erfordern die Möglichkeit, Elemente auf der Seite anzuzeigen oder auszublenden, z. B. ein Div. Dies kann einfach mit JavaScript erreicht werden. So können Sie die Sichtbarkeit eines Div mit einer Schaltfläche umschalten:

Reines JavaScript:

Dieser Ansatz verwendet die style.display-Eigenschaft des div-Elements. Wenn auf die Schaltfläche geklickt wird, wird ein Klickereignis-Listener ausgelöst, der prüft, ob das Div derzeit sichtbar ist (d. h. style.display ist nicht „none“). Wenn dies der Fall ist, wird das Div ausgeblendet, indem style.display auf „none“ gesetzt wird. Andernfalls wird es angezeigt, indem style.display auf „block“ gesetzt wird.

var button = document.getElementById('button'); // Assumes element with>
Nach dem Login kopieren

jQuery:

jQuery bietet einen einfacheren Ansatz zum Umschalten der Sichtbarkeit eines Elements . Die Methode toggle() schaltet die Sichtbarkeit des ausgewählten Elements um. Beim Klicken löst der Click-Event-Listener die toggle()-Methode für das Div mit der ID „newpost“ aus.

$("#button").click(function() { 
    // assumes element with>
Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie kann ich ein DIV-Element per Knopfdruck ein- und ausblenden?. 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
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage