Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

青灯夜游asal: 2022-04-21 17:16:322893semak imbas

Kaedah pertukaran: 1. Gunakan "elemen object.toggle()" untuk menyembunyikan elemen apabila elemen kelihatan dan memaparkan elemen apabila ia tidak kelihatan 2. Gunakan "elemen object.slideToggle()" , apabila elemen kelihatan, elemen disembunyikan, apabila elemen tidak kelihatan, elemen dipaparkan 3. Gunakan "elemen object.fadeToggle()".

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

Terdapat tiga cara untuk melaksanakan paparan dan menyembunyikan pertukaran dalam jquery:

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

kaedah togol()

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 mencipta kesan togol.

Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).

<!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() {
					$("p").toggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 hide() 和 show()</button>

	</body>
</html>

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

2. kaedah slideToggle()

kaedah slideToggle() melaksanakan slideUp() dan Tukar antara slideDown() .

Kaedah ini menyemak status boleh dilihat bagi elemen yang dipilih. Jika elemen disembunyikan, slideDown() dijalankan, jika elemen kelihatan, slideUp() dijalankan - ini mencipta kesan togol.

<!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() {
					$("p").slideToggle();
				});
			});
		</script>
	</head>
	<body>

		<p>这是一个段落。</p>
		<button>切换 slideUp() 和 slideDown()</button>

	</body>
</html>

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

3 kaedah fadeToggle()

kaedah fadeToggle() adalah antara kaedah fadeIn() dan fadeOut() bertukar antara.

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

Nota: Elemen tersembunyi tidak akan dipaparkan sepenuhnya (tidak lagi menjejaskan reka letak halaman).

<!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() {
					$("#div1").fadeToggle();
					$("#div2").fadeToggle("slow");
					$("#div3").fadeToggle(3000);
				});
			});
		</script>
	</head>
	<body>

		<p>实例演示了 fadeToggle() 使用了不同的 speed(速度) 参数。</p>
		<button>点击淡入/淡出</button>
		<br><br>
		<div id="div1" style="width:80px;height:80px;background-color:red;"></div>
		<br>
		<div id="div2" style="width:80px;height:80px;background-color:green;"></div>
		<br>
		<div id="div3" style="width:80px;height:80px;background-color:blue;"></div>

	</body>
</html>

Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery

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

Atas ialah kandungan terperinci Bagaimana untuk merealisasikan pertukaran paparan dan bersembunyi dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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 menghantar parameter dalam penghala tindak balasArtikel seterusnya：Bagaimana untuk menghantar parameter dalam penghala tindak balas

Artikel berkaitan

Lihat lagi