Rumah > Artikel > hujung hadapan web > jquery melaksanakan paparan kawalan tersembunyi
jquery melaksanakan paparan kawalan tersembunyi
- PHPzasal
- 2023-05-24 21:22:05705semak imbas
jQuery ialah perpustakaan JavaScript popular yang digunakan secara meluas dalam pembangunan bahagian hadapan. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menyembunyikan dan menunjukkan kawalan.
Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam halaman HTML. Anda boleh memilih untuk mengimportnya dalam talian atau memuat turunnya secara tempatan.
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>Seterusnya, tambahkan ID atau Kelas pada kawalan yang perlu disembunyikan atau ditunjukkan supaya ia boleh dipilih dan dimanipulasi dalam jQuery.
<div id="myDiv">
这是需要隐藏或显示的内容
</div>
<button class="myButton">点击显示/隐藏</button>Menambahkan DIV dengan ID "myDiv" dan butang dengan Kelas "myButton".
Kemudian, gunakan kaedah jQuery dalam kod JavaScript untuk memilih kawalan yang perlu ditunjukkan atau disembunyikan, dan tambah sifat CSS yang sepadan.
$(document).ready(function(){
$(".myButton").click(function(){
$("#myDiv").toggle();
});
});Pertama, kami menggunakan kaedah $(document).ready() selepas dokumen bersedia untuk memastikan elemen halaman dimuatkan sebelum melaksanakan kod.
Kemudian, kami memilih butang melalui pemilih $(".myButton") dan menambah acara klik pada butang. Apabila butang diklik, fungsi panggil balik dilaksanakan.
Dalam fungsi panggil balik, kami menggunakan pemilih $("#myDiv") untuk memilih DIV yang perlu disembunyikan atau dipaparkan dan menggunakan kaedah toggle() untuk menukar keadaan paparannya. Kaedah ini secara automatik akan mengubah suai nilai sifat CSS "paparan" untuk menunjukkan atau menyembunyikan elemen.
Jika anda memerlukan kawalan yang lebih halus, anda boleh menggunakan kaedah show() dan hide() untuk menunjukkan dan menyembunyikan elemen masing-masing.
$(document).ready(function(){
$(".myButton").click(function(){
$("#myDiv").toggle();
// $("#myDiv").show();
// $("#myDiv").hide();
});
});Di atas ialah cara menggunakan jQuery untuk menyembunyikan dan menunjukkan kawalan. Dengan mengubah suai pemilih dan sifat CSS, kami boleh mengawal keadaan paparan elemen halaman dengan cepat, menjadikan interaksi lebih mesra dan fleksibel.
Atas ialah kandungan terperinci jquery melaksanakan paparan kawalan tersembunyi. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!