Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery
Kaedah Jquery untuk menyembunyikan div tanpa menduduki ruang: 1. Gunakan "$("div").css('display','none'); 2. Gunakan "$("div" ) .hide();" pernyataan; 3. Gunakan pernyataan "$("div").toggle();" .
Persekitaran pengendalian tutorial ini: sistem Windows 7, versi jquery 1.10.2, komputer Dell G3.
jquery membenarkan div disembunyikan tanpa menduduki ruang
Jika anda ingin menyembunyikan div tanpa menduduki ruang, anda akan memikirkan untuk menetapkan gaya display:none
untuk div.
display:none
boleh menyembunyikan elemen tanpa mengambil ruang, jadi menukar atribut ini secara dinamik akan menyebabkan penyusunan semula (tukar susun atur halaman), yang boleh difahami sebagai memadamkan elemen daripada halaman diwarisi oleh keturunan, tetapi keturunannya tidak akan dipaparkan Lagipun, semuanya tersembunyi bersama.
Jadi bagaimana untuk menggunakan jquery untuk menetapkan gaya display:none
kepada div? Izinkan saya memperkenalkannya kepada anda di bawah:
Kaedah 1: Gunakan css() untuk menambah gaya display:none
$("div").css('display','none');
Contoh:
<!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() { $("div").css('display', 'none'); }); }); </script> </head> <body> <div style="border: 1px solid red;">hello</div> <br> <button>点击按钮,让div不占位隐藏</button> </body> </html>
Kaedah 2: Gunakan kaedah hide()
$("div").hide();
kaedah hide() boleh menyembunyikan elemen untuk menambah paparan pada elemen: tiada gaya
Kaedah 3: Gunakan kaedah toggle()
$("div").toggle();
togol( kaedah untuk menyemak status kelihatan bagi elemen yang dipilih . Jika elemen disembunyikan, jalankan show() untuk menyembunyikan elemen, dan jika elemen kelihatan, jalankan hide() untuk menunjukkan elemen - ini menghasilkan kesan togol
Cadangan tutorial berkaitan:Tutorial video jQuery
Atas ialah kandungan terperinci Bagaimana untuk menyembunyikan div tanpa mengambil ruang dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!