Heim  >  Artikel  >  Web-Frontend  >  Wie jquery den Versteck- oder Anzeigeeffekt von Elementen implementiert (Codebeispiel)

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

青灯夜游
青灯夜游Original
2018-10-20 14:08:254092Durchsuche

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>

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>

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!

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