Rumah > Artikel > hujung hadapan web > Bagaimana untuk menyembunyikan dan menunjukkan div dengan jquery

Bagaimana untuk menyembunyikan dan menunjukkan div dengan jquery

青灯夜游asal: 2022-06-15 11:47:529989semak imbas

3 cara untuk melaksanakan: 1. Gunakan toggle(), sintaks "$("div").toggle();" untuk menyemak status elemen div yang boleh dilihat dan jika elemen itu kelihatan, hide the element , memaparkan elemen jika ia disembunyikan. 2. Gunakan fadeToggle() untuk bertukar antara kelihatan dan tersembunyi, sintaksnya ialah "$("div").fadeToggle();". 3. Gunakan slideToggle() untuk bertukar antara kelihatan dan tersembunyi, sintaksnya ialah "$("div").slideToggle();".

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

Tiga cara untuk menyembunyikan dan menunjukkan elemen div dalam jquery

1 Elemen div

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

kaedah hide() menyembunyikan elemen yang dipilih.
kaedah show() memaparkan elemen terpilih yang tersembunyi.

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-3.6.0.min.js"></script>
		<script>
			$(document).ready(function() {
				$("button").click(function() {
					$("div").toggle();
				});
			});
		</script>
		<style>
			p,div,span {
				background-color: #FFC0CB;
			}
		</style>
	</head>
	<body>
		<p>p元素</p>
		<div>div元素</div>
		<span>span元素</span><br><br>
		<button>隐藏和显示div元素</button>

	</body>
</html>

Bagaimana untuk menyembunyikan dan menunjukkan div dengan jquery

2 Gunakan fadeToggle() untuk menyembunyikan dan menunjukkan elemen div

fadeToggle() kaedah 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.

<script src="./js/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("div").fadeToggle();
		});
	});
</script>
<style>
	p,div,span {
		background-color: #DAA520;
	}
</style>

Bagaimana untuk menyembunyikan dan menunjukkan div dengan jquery

3 Gunakan slideToggle() untuk menyembunyikan dan menunjukkan elemen div

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

Kaedah slideUp() menyembunyikan elemen yang dipilih secara gelongsor.
kaedah slideDown() memaparkan elemen yang dipilih secara gelongsor.

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.

<script src="./js/jquery-3.6.0.min.js"></script>
<script>
	$(document).ready(function() {
		$("button").click(function() {
			$("div").slideToggle();
		});
	});
</script>

Bagaimana untuk menyembunyikan dan menunjukkan div dengan jquery

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

Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan dan menunjukkan div dengan 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：Apakah pernyataan komen jquery?Artikel seterusnya：Apakah pernyataan komen jquery?

Artikel berkaitan

Lihat lagi