Rumah >hujung hadapan web >Soal Jawab bahagian hadapan >Bagaimana untuk menyembunyikan dan menunjukkan tag dalam jquery
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>
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>
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>
[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!