Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery-Soal Jawab bahagian hadapan-php.cn

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

青灯夜游

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

asal

3314 orang telah melayarinya

3 cara untuk melaksanakan: 1. Gunakan "$("a").toggle();"; 2. Gunakan "$("a").slideToggle();"; ("a").fadeToggle();". Tiga kaedah ini akan menyemak status teg yang boleh dilihat. Jika ia dipaparkan, ia akan disembunyikan, ia akan dipaparkan.

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.

jquery boleh menggunakan 3 kaedah terbina dalam berikut untuk menyembunyikan dan menunjukkan elemen

kaedah toggle()
kaedah slideToggle()
kaedah fadeToggle()

Gunakan togol() kaedah

Kaedah togol() bertukar antara hide() dan show() pada elemen yang dipilih.

Kaedah ini menyemak status boleh dilihat bagi elemen yang dipilih. Jika elemen tersembunyi, show() dijalankan, jika elemen kelihatan, hide() dijalankan - ini mewujudkan kesan bertukar antara keadaan tersembunyi dan ditunjukkan.

<!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>

Salin selepas log masuk

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

2 Gunakan kaedah slideToggle()

kaedah slideToggle() dipilih Tukar. antara slideUp() dan slideDown() pada elemen.

Kaedah ini menyemak status boleh dilihat bagi elemen yang dipilih. Jika elemen tersembunyi, slideDown() dijalankan, jika elemen kelihatan, slideUp() dijalankan - ini mewujudkan kesan bertukar antara keadaan tersembunyi dan ditunjukkan.

<!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>

Salin selepas log masuk

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

3 Gunakan kaedah fadeToggle()

kaedah fadeToggle() berada dalam fadeIn. ( ) dan kaedah fadeOut().

Jika unsur-unsur pudar, fadeToggle() akan memaparkannya menggunakan kesan fade-in.
Jika elemen pudar, fadeToggle() akan memaparkannya menggunakan kesan fade out.

<!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>

Salin selepas log masuk

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

[Pembelajaran yang disyorkan: tutorial video jQuery, video bahagian hadapan web]

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!