Heim >Web-Frontend >js-Tutorial >Wie schalte ich die Div-Sichtbarkeit mit einer Schaltfläche um?

Wie schalte ich die Div-Sichtbarkeit mit einer Schaltfläche um?

Susan Sarandon
Susan SarandonOriginal
2024-11-03 09:05:02330Durchsuche

How to Toggle Div Visibility with a Button?

Div-Sichtbarkeit mit der Schaltfläche umschalten

Dieser Artikel befasst sich mit der häufigen Aufgabe, die Sichtbarkeit eines div-Elements mithilfe einer Schaltfläche umzuschalten.

Problem:

Sie haben ein Div, das Sie je nach Interaktion des Benutzers mit einer Schaltfläche ein- oder ausblenden möchten.

Lösung:

Reines JavaScript:

<code class="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';
    }
};</code>

jQuery:

<code class="javascript">$("#button").click(function() { 
    // assumes element with id='button'
    $("#newpost").toggle();
});</code>

Durch die Verwendung dieser Skripte können Sie steuern die Sichtbarkeit Ihres div-Elements dynamisch, sodass Benutzer seinen Inhalt nach Bedarf ausblenden oder anzeigen können.

Das obige ist der detaillierte Inhalt vonWie schalte ich die Div-Sichtbarkeit mit einer Schaltfläche um?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
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