Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery

青灯夜游asal: 2022-04-29 11:51:533353semak imbas

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.

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>

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>

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>

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!

jquery

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Bagaimana untuk menambah elemen dalam jqueryArtikel seterusnya：Bagaimana untuk menambah elemen dalam jquery

Artikel berkaitan

Lihat lagi