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

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

Patricia Arquette
Patricia ArquetteOriginal
2024-12-14 12:34:14657Durchsuche

How Can I Show or Hide a DIV Element Using a Button Click?

So schalten Sie die Sichtbarkeit eines DIV mit einer Schaltfläche um

Frage:

Wie kann ich ein DIV ein- oder ausblenden? wenn ein Knopf ist angeklickt?

Antwort:

Um die Sichtbarkeit eines DIV mit einer Schaltfläche umzuschalten, können Sie entweder JavaScript oder jQuery verwenden.

Mit reinem JavaScript:

  1. Rufen Sie einen Verweis auf die Schaltfläche ab Element:

    var button = document.getElementById('button');
  2. Definieren Sie eine Funktion zum Umschalten der Sichtbarkeit:

    button.onclick = function() {
  3. Rufen Sie einen Verweis auf das DIV-Element ab:

    var div = document.getElementById('newpost');
  4. Überprüfen Sie, ob der DIV aktuell ist angezeigt:

    if (div.style.display !== 'none') {
  5. Sichtbarkeit entsprechend umschalten:

        div.style.display = 'none'; // Hide
    }
    else {
        div.style.display = 'block'; // Show
    }
    };

Mit jQuery:

  1. Wählen Sie die Schaltfläche aus und binden Sie ein Klickereignis Handler:

    $("#button").click(function() {
  2. Wählen Sie das DIV aus und schalten Sie seine Sichtbarkeit um:

        $("#newpost").toggle();
    });

Das obige ist der detaillierte Inhalt vonWie kann ich ein DIV-Element per Knopfdruck ein- oder ausblenden?. 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