Tutorial: Inhalte automatisch je nach Monat ein- und ausblenden

JavaScript Tutorial - Elemente je nach Datum ein- oder ausblenden

Dieses Tutorial zeigt, wie Inhalte automatisch ein- und ausgeblendet werden können, je nachdem welcher Monat aktuell ist. Dieses Beispiel kann natürlich auch auf ein bestimmtes Datum/Jahr oder auf Zeiträume angepasst werden.

Der nachfolgende Code kann entweder im Header oder Footer eingefügt werden (hierzu noch <script> vor und </script> nach dem Code hinzufügen) oder bei der Nutzung eines CMS, wie WordPress, in das Custom JavaScript Feld Ihres Themes oder Ihres Plugins.

Kurzerklärung des Codes: 

  • var d = new Date(); initialisiert ein Datum.
  • var n = d.getMonth(); fragt den aktuellen Monat ab.
  • if (n == 0) fragt, ob der aktuelle Monat n gleich dem ersten Monat des Jahres, sprich Januar, ist. Wichtig: Aufzählungen starten immer bei Null.
  • document.getElementById(„January“): suche nach dem Element mit der ID „January“.
  • document.GetElementById(„January“).style.display = … : zeige den Inhalt mit der ID „January“ an (display = „inline“;) oder blende ihn aus (display = „none“;).

Code:

jQuery(document).ready(function(){
var d = new Date();
var n = d.getMonth();

if (n == 0) {
document.getElementById("January").style.display = "inline";
} else {
document.getElementById("January").style.display = "none";
}

if (n == 1) {
document.getElementById("February").style.display = "inline";
} else {
document.getElementById("February").style.display = "none";
}

if (n == 2) {
document.getElementById("March").style.display = "inline";
} else {
document.getElementById("March").style.display = "none";
}

if (n == 3) {
document.getElementById("April").style.display = "inline";
} else {
document.getElementById("April").style.display = "none";
}

// Fortführen mit n == 4 für Mai, n == 5 für Juni etc.

});