So wechseln Sie zwischen dem Anzeigen und Ausblenden von Divs in CSS

CSS ist eine der Fähigkeiten, die die Front-End-Entwicklung beherrschen muss, und das Ein- und Ausblenden des Div-Wechsels ist ein wichtiger Teil davon. In diesem Artikel wird ausführlich beschrieben, wie Sie in CSS zwischen dem Anzeigen und Ausblenden von Divs wechseln.

1. Verwenden Sie das Anzeigeattribut, um Divs anzuzeigen und auszublenden.

In CSS ist die Verwendung des Anzeigeattributs die am häufigsten verwendete Methode, um zwischen dem Anzeigen und Ausblenden von Divs zu wechseln. Durch dieses Attribut kann die Anzeige die Sichtbarkeit und Ausdrückbarkeit von Elementen steuern.

Häufig verwendete Anzeigewerte sind: Block, Inline, Inline-Block, None usw., wobei None der Schlüssel zum Ausblenden des Div ist.

Der CSS-Code lautet wie folgt:

.hide {
    display: none;
}
.show {
    display: block;
}

Hide wird erreicht, indem das Anzeigeattribut des .hide-Elements auf „none“ gesetzt wird und das Anzeigeattribut des .show-Elements blockiert wird, um die Anzeige zu erreichen.

Um das Ein- und Ausblenden von Divs zu steuern, können wir mit JavaScript oder jQuery auf diese CSS-Klassen zugreifen und sie bei Bedarf hinzufügen oder entfernen.

Zum Beispiel:

HTML-Code:

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

JS-Code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Hier verwenden wir die toggleClass()-Methode von jQuery, um die Klasse zu wechseln. Wenn Sie auf die Schaltfläche klicken, löscht diese Methode die .hide-Klasse aus dem Editor. und fügen Sie die Klasse .show hinzu, um das Div von ausgeblendet auf angezeigt umzustellen.

2. Verwenden Sie das Sichtbarkeitsattribut, um das Div anzuzeigen und auszublenden. Das Sichtbarkeitsattribut kann wie das Anzeigeattribut verwendet werden, um die Sichtbarkeit von Elementen zu steuern: sichtbar, ausgeblendet, minimiert.

Wenn wir ein Element mithilfe des Sichtbarkeitsattributs ausblenden, nimmt das Element weiterhin Platz im HTML-Dokument ein und wird lediglich optisch transparent oder unsichtbar, seine Größe und Position sind jedoch weiterhin auf der Seite vorhanden.

Der CSS-Code lautet wie folgt:

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

Das CSS-Codebeispiel ähnelt dem Anzeigebeispiel unter Verwendung des Anzeigeattributs. Hier sprechen wir nur über den JS-Code:

JS-Code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Die toggleClass()-Methode ist Wird auch zum Klassenwechsel verwendet.

3. Verwenden Sie das Opazitätsattribut, um das Div anzuzeigen und auszublenden. Das Opazitätsattribut wird verwendet, um die Transparenz des Elements festzulegen. Sein Wertebereich liegt zwischen 0,0 und 1,0, wobei 0,0 bedeutet, dass das Element vollständig transparent ist bedeutet, dass das Element völlig undurchsichtig ist.

Der CSS-Code lautet wie folgt:

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

Zusätzlich zur Verwendung des Opazitätsattributs definieren wir auch die Höhen- und Überlaufattribute, um das Problem zu lösen, dass beim Ausblenden des Div Platz bleibt.

Wenn die Hide-Klasse angewendet wird, wird die Höhe des Div auf 0 gesetzt und der Inhalt ausgeblendet. Um die Höhe nach dem Umschalten automatisch anzupassen, setzen wir die Höhe in der .show-Klasse auf „Auto“, sodass sich das Div beim Umschalten automatisch anpasst und sichtbar wird.

Schauen wir uns noch einmal den JavaScript-Code an:

JS-Code:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Verwenden Sie auch die Methode toggleClass().

4. Zusammenfassung

Die oben genannten sind die drei Hauptmethoden zum Ein- und Ausblenden von Divs. Sie verwenden das Anzeigeattribut, das Sichtbarkeitsattribut und das Deckkraftattribut. In praktischen Anwendungen müssen wir basierend auf den spezifischen Anforderungen auswählen, welche Methode wir verwenden möchten.

Darüber hinaus wird häufig der Wert „visibility:hidden;display:none“ verwendet, um das Element unsichtbar zu machen und keinen Platz auf dem Bildschirm zu belegen Wenn der JS-Code das Element aufruft, kann er die Positionsinformationen des Elements abrufen. Wenn jedoch „visibility:hidden;display:none“ verwendet wird, reagiert das Element nicht mehr auf Klickereignisse, was sich auf Ihre Anwendung auswirken kann. Daher müssen Sie bei der Verwendung entsprechend der jeweiligen Situation auswählen.

Kurz gesagt, Sie müssen CSS-Eigenschaften beherrschen und gut darin verwenden können, um die entwickelten Webseiten hinsichtlich visueller Effekte zu verbessern, das Benutzererlebnis zu verbessern und eine solide Grundlage für die nachfolgende JS-Entwicklung zu legen.

Das obige ist der detaillierte Inhalt vonSo wechseln Sie zwischen dem Anzeigen und Ausblenden von Divs in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!