So verwenden Sie JavaScript zum Ausblenden und Anzeigen von Divs

In der Webentwicklung müssen wir häufig die Funktion zum Ausblenden und Anzeigen von Elementen über JavaScript implementieren, um das Benutzerinteraktionserlebnis zu verbessern. Eines der klassischen Szenarien besteht darin, auf eine Schaltfläche zu klicken, um ein Element ein- oder auszublenden. Im Folgenden wird erläutert, wie Sie JavaScript zum Implementieren dieser Funktion verwenden.

1. HTML-Struktur

Zuerst müssen wir eine Schaltfläche und ein Div zum Ausblenden oder Anzeigen in HTML erstellen:

<button id="toggle-btn">点击切换</button>
<div id="toggle-div"></div>

2. CSS-Stil

Wir können der Schaltfläche und dem Div CSS-Stile hinzufügen, um sie schöner zu machen Und einfach zu bedienen:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

3. JavaScript-Code

Als nächstes müssen wir JavaScript-Code verwenden, um die Funktion zum Ausblenden und Anzeigen von Divs zu implementieren. Wir können Ereignis-Listener verwenden, um auf Schaltflächenklick-Ereignisse zu warten, und CSS-Stile verwenden, um das Anzeigen und Ausblenden von Divs zu steuern.

Zuerst müssen wir eine Variable definieren, um den Status des Div darzustellen. Der Anfangszustand wird angezeigt und als wahr definiert:

let isShown = true;

Dann können wir die querySelector-Methode verwenden, um die Schaltfläche und das DOM-Element des Div abzurufen Ausgeblendet oder angezeigt werden soll:

const toggleBtn = document.querySelector('#toggle-btn');
const toggleDiv = document.querySelector('#toggle-div');

Als nächstes müssen wir das Klickereignis binden, d angezeigt, und wenn ja, setzen Sie es in den ausgeblendeten Zustand, während Sie Statusvariablen aktualisieren und umgekehrt.

Vollständiger Code:

toggleBtn.addEventListener('click', function() {
  if(isShown) {
    toggleDiv.style.display = 'none';
    isShown = false;
  } else {
    toggleDiv.style.display = 'block';
    isShown = true;
  }
});

4. Der obige Code kann Divs ein- und ausblenden, aber es gibt einige Redundanzen im Code und kann optimiert werden.

Erstens können wir die Umschaltmethode verwenden, um die Anzeige und den verborgenen Status des Div zu wechseln:

<button id="toggle-btn" style="background-color: #fff; color: #333; border: 1px solid #333; padding: 5px 10px;">点击切换</button>
<div id="toggle-div" style="background-color: #f5f5f5; padding: 10px;">这是要隐藏或显示的div</div>

<script>
  let isShown = true;
  const toggleBtn = document.querySelector('#toggle-btn');
  const toggleDiv = document.querySelector('#toggle-div');
  toggleBtn.addEventListener('click', function() {
    if(isShown) {
      toggleDiv.style.display = 'none';
      isShown = false;
    } else {
      toggleDiv.style.display = 'block';
      isShown = true;
    }
  });
</script>

Zweitens können wir die Stildefinition in CSS verschieben, um die Wartbarkeit des Codes zu verbessern:

toggleBtn.addEventListener('click', function() {
  toggleDiv.style.display = isShown ? 'none' : 'block';
  isShown = !isShown;
});

Der endgültige optimierte vollständige Code :

#toggle-btn {
  background-color: #fff;
  color: #333;
  border: 1px solid #333;
  padding: 5px 10px;
}

#toggle-div {
  background-color: #f5f5f5;
  padding: 10px;
}

5. Zusammenfassung

Die Verwendung von JavaScript zum Ein- und Ausblenden von Elementen ist ein sehr häufiges Szenario in der Webentwicklung. Diese Funktion kann durch Ereignis-Listener, die Bedienung von CSS-Stilen und die Steuerung des Elementstatus gut implementiert werden, um das Benutzerinteraktionserlebnis zu verbessern. Durch die Optimierung des Codes können die Lesbarkeit und Wartbarkeit des Codes weiter verbessert und die Entwicklungseffizienz verbessert werden.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie JavaScript zum Ausblenden und Anzeigen von Divs. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!