Rumah >hujung hadapan web >tutorial js >Gunakan jQuery untuk melaksanakan kesan penukaran nilai atribut paparan
Gunakan jQuery untuk melaksanakan kesan penukaran nilai atribut paparan
- 王林asal
- 2024-02-21 13:48:04977semak imbas
Gunakan jQuery untuk melaksanakan kesan penukaran nilai atribut paparan
Dalam pembangunan bahagian hadapan, kami sering menghadapi keperluan untuk menukar paparan dan menyembunyikan elemen berdasarkan operasi pengguna. Atribut paparan boleh mencapai fungsi ini. Dalam artikel ini, kami akan menggunakan jQuery untuk melaksanakan kesan penukaran nilai atribut paparan. Seterusnya, mari belajar cara menggunakan jQuery untuk mencapai fungsi ini.
Mula-mula, perkenalkan perpustakaan jQuery ke dalam fail HTML Anda boleh menggunakan CDN atau mengimport jQuery secara tempatan. Seterusnya, kami mencipta struktur HTML ringkas untuk menunjukkan kesan pensuisan:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display 切换效果</title>
</head>
<body>
<button id="toggleButton">切换显示</button>
<div id="content" style="display: none;">
这是要切换显示的内容。
</div>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>Dalam kod di atas, kami mencipta elemen butang dan elemen div Pada mulanya, atribut paparan elemen div adalah tiada, iaitu keadaan tersembunyi. .
Seterusnya, kita perlu menulis kod jQuery dalam fail script.js untuk menukar paparan dan keadaan tersembunyi elemen div apabila butang diklik:
$(document).ready(function() {
$('#toggleButton').click(function() {
$('#content').toggle();
});
});Dalam kod di atas, kami mula-mula menggunakan $(document).ready () Kaedah ini memastikan bahawa DOM dimuatkan sebelum melaksanakan kod. Kemudian, kami mendengar peristiwa klik butang dan menggunakan kaedah toggle() untuk menukar paparan dan keadaan tersembunyi elemen div.
Kini apabila pengguna mengklik butang, elemen div akan bertukar-tukar antara menunjukkan dan bersembunyi. Ini adalah contoh mudah menggunakan jQuery untuk mencapai kesan penukaran nilai atribut paparan. Anda boleh mengubah suai dan mengembangkan kod mengikut keperluan sebenar untuk mencapai kesan interaktif yang lebih kaya. Harap artikel ini membantu anda!
Atas ialah kandungan terperinci Gunakan jQuery untuk melaksanakan kesan penukaran nilai atribut paparan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!