jquery verbirgt und zeigt dynamische Divs an-Front-End-Fragen und Antworten-php.cn

jquery verbirgt und zeigt dynamische Divs an

WBOY

Freigeben： 2023-05-18 20:50:06

Original

997 Leute haben es durchsucht

jQuery ist eine schnelle, übersichtliche und leistungsstarke Javascript-Bibliothek, die umfangreiche Tools und Funktionen für die Webentwicklung bereitstellt. In der Webentwicklung können mit jQuery verschiedene Effekte erzielt werden, um die Website schöner und benutzerfreundlicher zu machen. Unter diesen ist das Ausblenden und Anzeigen dynamischer Div-Elemente eine häufige Anforderung. In diesem Artikel wird erläutert, wie Sie mit jQuery diesen Effekt erzielen.

Dynamische div-Elemente ein- und ausblenden, wodurch sich tatsächlich die CSS-Eigenschaften des Elements ändern. Insbesondere müssen wir beim Ausblenden eines div-Elements sein Anzeigeattribut auf „Keine“ setzen, damit das Element nicht angezeigt wird. Wenn wir ein div-Element anzeigen, müssen wir sein Anzeigeattribut auf „Block“ oder andere Werte setzen, damit das Element angezeigt wird wird erneut angezeigt.

Mit jQuery können wir die folgenden zwei Möglichkeiten verwenden, um dynamische div-Elemente auszublenden und anzuzeigen:

Verwenden Sie die Methoden hide() und show()

Die Verwendung der Methoden hide() und show() von jQuery ist am einfachsten. der direkteste Weg. Mit diesen beiden Methoden können Elemente direkt ein- und ausgeblendet werden, ohne dass CSS-Eigenschaften des Elements festgelegt werden müssen.

Das Folgende ist ein Codebeispiel mit den Methoden hide() und show():

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").hide();
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").show();
            });
        });
    </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code definieren wir ein div-Element mit der Klasse „dynamic-div“ und setzen sein Anzeigeattribut auf „none“, was die Standardeinstellung ist In diesem Fall ist das Element ausgeblendet. Anschließend werden der Seite zwei Schaltflächen hinzugefügt, die die Methoden hide() und show() verwenden, um das Element auszublenden und anzuzeigen. Wenn Sie auf die Schaltfläche „Ausblenden“ klicken, wird das Element ausgeblendet, und wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird das Element erneut angezeigt.

Verwenden Sie die Methode css()

Zusätzlich zur Verwendung der Methoden hide() und show() können wir auch die Methode css() verwenden, um die CSS-Eigenschaften dynamischer div-Elemente zu ändern. Insbesondere können wir die Methode css() verwenden, um das Anzeigeattribut zu ändern, um den Effekt des Ausblendens und Anzeigens von Elementen zu erzielen.

Das Folgende ist ein Codebeispiel unter Verwendung der css()-Methode:

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Hide and Show Demo</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        .dynamic-div {
            width: 200px;
            height: 100px;
            background-color: #ccc;
            margin: 50px auto;
            text-align: center;
            line-height: 100px;
            font-size: 24px;
            display: none; /* 默认隐藏 */
        }
    </style>
</head>
<body>
    <button id="hide-btn">Hide</button>
    <button id="show-btn">Show</button>
    <div class="dynamic-div">This is a dynamic div element.</div>
    <script>
        $(document).ready(function() {
            $("#hide-btn").click(function() {
                $(".dynamic-div").css("display", "none");
            });
            $("#show-btn").click(function() {
                $(".dynamic-div").css("display", "block");
            });
        });
    </script>
</body>
</html>

Nach dem Login kopieren

Im obigen Code verwenden wir die css()-Methode, um das Anzeigeattribut des .dynamic-div-Elements zu ändern und so den Effekt des Ausblendens von zu erzielen das Element anzeigen. Wenn Sie auf die Schaltfläche „Ausblenden“ klicken, wird das Element ausgeblendet, und wenn Sie auf die Schaltfläche „Anzeigen“ klicken, wird das Element erneut angezeigt.

Zusammenfassung

Es ist sehr einfach, mit jQuery dynamische div-Elemente auszublenden und anzuzeigen. Wir können die Methoden hide () und show () verwenden, um Elemente direkt auszublenden und anzuzeigen, oder wir können die Methode css () verwenden, um das Anzeigeattribut des Elements zu ändern, um den Effekt des Ausblendens und Anzeigens zu erzielen. Es ist zu beachten, dass wir bei mehreren dynamischen div-Elementen auf der Seite die Klasse oder ID verwenden müssen, um die Elemente anzugeben, die ausgeblendet oder angezeigt werden müssen.

Das obige ist der detaillierte Inhalt vonjquery verbirgt und zeigt dynamische Divs an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!