Heim > Web-Frontend > js-Tutorial > Hauptteil

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

Patricia Arquette
Freigeben: 2024-10-31 06:24:30
Original
662 Leute haben es durchsucht

How to Toggle the Visibility of a DIV Element Using a Button?

Sichtbarkeit eines DIV-Elements mithilfe einer Schaltfläche umschalten

Frage: Können Sie mir bei der Erstellung einer Umschaltschaltfläche helfen? das die Sichtbarkeit eines DIV-Elements steuert?

Lösung: Um dies zu erreichen, können wir je nach Implementierungssprache verschiedene Ansätze verwenden. Hier sind zwei gängige Methoden:

Reines JavaScript:

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var div = document.getElementById('newpost');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};
Nach dem Login kopieren

jQuery:

$("#button").click(function() { 
    // assumes element with id='button'
    $("#newpost").toggle();
});
Nach dem Login kopieren

Diese Lösungen verwenden einfache Ereignishandler zum Umschalten der „Anzeige“-Eigenschaft des DIV-Elements, sodass es je nach Schaltflächenklick des Benutzers ausgeblendet oder sichtbar gemacht wird.

Das obige ist der detaillierte Inhalt vonWie schalte ich die Sichtbarkeit eines DIV-Elements mithilfe einer Schaltfläche um?. 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
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!