Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)-js-Tutorial-php.cn

Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

青灯夜游

Freigeben： 2018-10-20 14:08:25

Original

4111 Leute haben es durchsucht

Wie kann ich Elemente mit JQuery ausblenden oder anzeigen? In diesem Artikel erfahren Sie, wie Sie das Ausblenden oder Anzeigen von Elementen in JQuery festlegen, damit Sie die Methode zum Erzielen des Umschalteffekts beim Ausblenden und Anzeigen von Elementen verstehen. Es hat einen gewissen Referenzwert. Freunde in Not können sich darauf beziehen. Ich hoffe, es wird Ihnen hilfreich sein.

Es gibt zwei Möglichkeiten, Effekte zum Ausblenden und Anzeigen von Elementen in jquery zu implementieren, nämlich:

1. Verwenden Sie die Methoden hide() und show(), um Elemente auszublenden und anzuzeigen

2 , Verwenden Sie die toggle()-Methode, um Elemente auszublenden und anzuzeigen

Schauen wir uns an, wie diese beiden Methoden das Ausblenden und Anzeigen von Elementen implementieren.

Die Methoden hide() und show() implementieren das Ausblenden und Anzeigen von Elementen

Die Methode hide() von jquery wird zum Ausblenden von Elementen verwendet

Die show()-Methode von jquery wird zum Anzeigen von Elementen verwendet.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn1").click(function(){
		        $("p").hide();
		    });
		    $(".btn2").click(function(){
		        $("p").show();
		    });
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn1">Hide--隐藏</button>
		<button class="btn2">Show--显示</button>
	</body>

</html>

Nach dem Login kopieren

Rendering:

Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

Klicken Sie auf die Schaltfläche „Ausblenden“. Sie können die Methode „hide()“ verwenden Versteckte Elemente:

Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

Klicken Sie auf die Schaltfläche „Anzeigen“, um die ausgeblendeten Elemente mit der Methode show() anzuzeigen:

Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

Die Methode toggle() implementiert das Ausblenden und Anzeigen von Elementen (Umschalten des Ausblendens oder Anzeigens).

Die Methode toggle() kann den sichtbaren Zustand von Elementen umschalten, d. h. Elemente umschalten verstecken oder zeigen. Die Methode

toggle() bestimmt, ob die Elemente ausgeblendet oder angezeigt werden. Wenn die ausgewählten Elemente sichtbar sind, werden diese Elemente ausgeblendet.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<script type="text/javascript" src="jquery.min.js"></script>
		<script type="text/javascript">
		$(document).ready(function(){
		    $(".btn").click(function(){
		        $("p").toggle();
		});
		</script>
	</head>
	<body>
		<p>这是一段测试文字。</p>
		<button class="btn">toggle()</button>
	</body>
</html>

Nach dem Login kopieren

Rendering:

Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

Hinweis: Verwenden Sie zuerst JQuery-Methoden, ob hide(), show(), toggle() oder andere Methoden Verweisen Sie auf die Datei jquery.js.

Zusammenfassung: Das Obige ist der gesamte Inhalt von jquery zum Implementieren des Ausblend- oder Anzeigeeffekts von Elementen. Der Code ist sehr einfach und Sie können ihn gegen Gebühr selbst ausprobieren. Ich hoffe, dass es für das Lernen aller hilfreich sein wird. Weitere verwandte Tutorials finden Sie unter jQuery-Video-Tutorial, JavaScript-Video-Tutorial, Bootstrap-Video-Tutorial!

Das obige ist der detaillierte Inhalt vonWie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!