suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >jquery implementiert die versteckte Anzeige von Steuerelementen

jquery implementiert die versteckte Anzeige von Steuerelementen

PHPz
PHPzOriginal
2023-05-24 21:22:05767Durchsuche

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>

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>

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();
    });
});

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();
    });
});

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!

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：jquery legt Wert auf Formular festNächster Artikel：jquery legt Wert auf Formular fest

In Verbindung stehende Artikel

Mehr sehen