So verbergen und zeigen Sie ein Tag in JQuery an-Front-End-Fragen und Antworten-php.cn

So verbergen und zeigen Sie ein Tag in JQuery an

青灯夜游

Freigeben： 2022-04-29 11:52:06

Original

3169 Leute haben es durchsucht

3 Möglichkeiten zur Implementierung: 1. Verwenden Sie „$(“a“).toggle();“ 2. Verwenden Sie „$(“a“).slideToggle();“ ).fadeToggle();". Diese drei Methoden prüfen den Sichtbarkeitsstatus eines Tags. Wenn es angezeigt wird, wird es ausgeblendet.

So verbergen und zeigen Sie ein Tag in JQuery an

Die Betriebsumgebung dieses Tutorials: Windows7-System, jquery1.10.2-Version, Dell G3-Computer.

jquery kann die folgenden 3 integrierten Methoden verwenden, um Elemente auszublenden und anzuzeigen:

toggle()-Methode
slideToggle()-Methode
fadeToggle()-Methode

1 . Verwenden Sie die toggle()-Methode

toggle()-Methode, um zwischen hide() und show() für das ausgewählte Element umzuschalten.

Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird show() ausgeführt, wenn ein Element sichtbar ist, wird hide() ausgeführt – dies erzeugt den Effekt des Wechsels zwischen ausgeblendetem und angezeigtem Zustand.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").toggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

Nach dem Login kopieren

So verbergen und zeigen Sie ein Tag in JQuery an

2. Verwenden Sie die slideToggle()-Methode

slideToggle()-Methode, um zwischen slideUp() und slideDown() für das ausgewählte Element zu wechseln.

Diese Methode prüft den Sichtbarkeitsstatus des ausgewählten Elements. Wenn ein Element ausgeblendet ist, wird slideDown() ausgeführt, wenn ein Element sichtbar ist, wird slideUp() ausgeführt – dies erzeugt den Effekt des Wechsels zwischen ausgeblendetem und angezeigtem Zustand.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

Nach dem Login kopieren

So verbergen und zeigen Sie ein Tag in JQuery an

3. Verwenden Sie die fadeToggle()-Methode

fadeToggle()-Methode, um zwischen den fadeIn()- und fadeOut()-Methoden zu wechseln.

Wenn Elemente ausgeblendet sind, zeigt fadeToggle() sie mit dem Einblendeffekt an.
Wenn Elemente eingeblendet werden, zeigt fadeToggle() sie mit dem Ausblendeffekt an.

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="js/jquery-1.10.2.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("a").fadeToggle();
				});
			});
		</script>
	</head>
	<body>

		<a href="#">a标签超链接</a><br><br>
		<button>隐藏和显示a标签</button>

	</body>
</html>

Nach dem Login kopieren

So verbergen und zeigen Sie ein Tag in JQuery an

【Empfohlenes Lernen: jQuery-Video-Tutorial, Web-Frontend-Video】

Das obige ist der detaillierte Inhalt vonSo verbergen und zeigen Sie ein Tag in JQuery an. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!