jquery melaksanakan paparan kawalan tersembunyi-Soal Jawab bahagian hadapan-php.cn

jquery melaksanakan paparan kawalan tersembunyi

PHPz

Lepaskan： 2023-05-24 21:22:05

asal

701 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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();
    });
});

Salin selepas log masuk

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();
    });
});

Salin selepas log masuk

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!