suchen

Heim >Web-Frontend >Front-End-Fragen und Antworten >So verbergen und zeigen Sie ein Tag in JQuery an

So verbergen und zeigen Sie ein Tag in JQuery an

青灯夜游
青灯夜游Original
2022-04-29 11:51:533383Durchsuche

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>

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>

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>

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!

jquery
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：So fügen Sie ein Element in JQuery hinzuNächster Artikel：So fügen Sie ein Element in JQuery hinzu

In Verbindung stehende Artikel

Mehr sehen