jquery implementiert die versteckte Anzeige von Steuerelementen-Front-End-Fragen und Antworten-php.cn

jquery implementiert die versteckte Anzeige von Steuerelementen

PHPz

Freigeben： 2023-05-24 21:22:05

Original

700 Leute haben es durchsucht

jQuery ist eine beliebte JavaScript-Bibliothek, die häufig in der Front-End-Entwicklung verwendet wird. In diesem Artikel wird erläutert, wie Sie mit jQuery Steuerelemente ein- und ausblenden.

Zuerst müssen wir die jQuery-Bibliothek in die HTML-Seite einführen. Sie können es online importieren oder lokal herunterladen.

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>

Nach dem Login kopieren

Fügen Sie als Nächstes eine ID oder Klasse zu den Steuerelementen hinzu, die ausgeblendet oder angezeigt werden müssen, damit sie in jQuery ausgewählt und bearbeitet werden können.

<div id="myDiv">
    这是需要隐藏或显示的内容
</div>

<button class="myButton">点击显示/隐藏</button>

Nach dem Login kopieren

Ein DIV mit der ID „myDiv“ und eine Schaltfläche mit der Klasse „myButton“ hinzugefügt.

Verwenden Sie dann die jQuery-Methode im JavaScript-Code, um die Steuerelemente auszuwählen, die angezeigt oder ausgeblendet werden müssen, und fügen Sie die entsprechenden CSS-Eigenschaften hinzu.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
    });
});

Nach dem Login kopieren

Zunächst verwenden wir die Methode $(document).ready(), nachdem das Dokument fertig ist, um sicherzustellen, dass die Seitenelemente geladen werden, bevor der Code ausgeführt wird.

Dann wählen wir die Schaltfläche über den Selektor $(".myButton") aus und fügen der Schaltfläche ein Klickereignis hinzu. Beim Klicken auf die Schaltfläche wird die Callback-Funktion ausgeführt.

In der Rückruffunktion verwenden wir den Selektor $("#myDiv"), um das DIV auszuwählen, das ausgeblendet oder angezeigt werden muss, und verwenden die Methode toggle(), um seinen Anzeigestatus zu ändern. Diese Methode ändert automatisch den Wert der CSS-Eigenschaft „display“, um das Element anzuzeigen oder auszublenden.

Wenn Sie eine feinere Steuerung benötigen, können Sie die Methoden show() und hide() verwenden, um Elemente anzuzeigen bzw. auszublenden.

$(document).ready(function(){
    $(".myButton").click(function(){
        $("#myDiv").toggle();
        // $("#myDiv").show();
        // $("#myDiv").hide();
    });
});

Nach dem Login kopieren

Oben erfahren Sie, wie Sie mit jQuery Steuerelemente ein- und ausblenden. Durch das Ändern von Selektoren und CSS-Eigenschaften können wir den Anzeigestatus von Seitenelementen schnell steuern und so die Interaktion benutzerfreundlicher und flexibler gestalten.

Das obige ist der detaillierte Inhalt vonjquery implementiert die versteckte Anzeige von Steuerelementen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!