Rumah > Artikel > hujung hadapan web > jquery menyembunyikan dan memaparkan div dinamik
jquery menyembunyikan dan memaparkan div dinamik
- WBOYasal
- 2023-05-18 20:50:06995semak imbas
jQuery ialah perpustakaan Javascript yang pantas, ringkas dan berkuasa yang menyediakan pelbagai alatan dan fungsi untuk pembangunan web. Dalam pembangunan web, jQuery boleh digunakan untuk mencapai pelbagai kesan untuk menjadikan laman web lebih cantik dan mudah digunakan. Antaranya, menyembunyikan dan menunjukkan elemen div dinamik adalah keperluan biasa Artikel ini akan memperkenalkan cara menggunakan jQuery untuk mencapai kesan ini.
Sembunyikan dan tunjukkan elemen div dinamik, yang sebenarnya mengubah sifat CSS elemen tersebut. Khususnya, apabila menyembunyikan elemen div, kita perlu menetapkan atribut paparannya kepada tiada, supaya elemen itu tidak akan dipaparkan apabila memaparkan elemen div, kita perlu menetapkan atribut paparannya kepada blok atau nilai lain, supaya elemen itu akan dipaparkan semula.
Menggunakan jQuery, kita boleh menyembunyikan dan menunjukkan elemen div dinamik dalam dua cara berikut:
- Gunakan kaedah hide() dan show()
Menggunakan kaedah hide() dan show() jQuery ialah cara yang paling mudah dan langsung. Kedua-dua kaedah ini boleh menyembunyikan dan menunjukkan elemen secara langsung tanpa menetapkan sebarang sifat CSS elemen tersebut.
Berikut ialah contoh kod menggunakan kaedah hide() dan show():
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide and Show Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.dynamic-div {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 50px auto;
text-align: center;
line-height: 100px;
font-size: 24px;
display: none; /* 默认隐藏 */
}
</style>
</head>
<body>
<button id="hide-btn">Hide</button>
<button id="show-btn">Show</button>
<div class="dynamic-div">This is a dynamic div element.</div>
<script>
$(document).ready(function() {
$("#hide-btn").click(function() {
$(".dynamic-div").hide();
});
$("#show-btn").click(function() {
$(".dynamic-div").show();
});
});
</script>
</body>
</html>Dalam kod di atas, kami mentakrifkan elemen div dengan kelas dinamik-div dan menambahnya Paparan atribut ditetapkan kepada tiada, yang bermaksud elemen itu tersembunyi secara lalai. Kemudian, dua butang ditambahkan pada halaman, menggunakan kaedah hide() dan show() untuk menyembunyikan dan menunjukkan elemen masing-masing. Apabila butang Sembunyikan diklik, elemen akan disembunyikan, dan apabila butang Tunjukkan diklik, elemen itu akan dipaparkan semula.
- Gunakan kaedah css()
Selain menggunakan kaedah hide() dan show(), kita juga boleh menggunakan kaedah css() untuk mengubah suai CSS harta elemen div dinamik. Secara khusus, kita boleh menggunakan kaedah css() untuk mengubah suai atribut paparan untuk mencapai kesan menyembunyikan dan menunjukkan elemen.
Berikut ialah contoh kod menggunakan kaedah css():
<!DOCTYPE html>
<html>
<head>
<title>jQuery Hide and Show Demo</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
.dynamic-div {
width: 200px;
height: 100px;
background-color: #ccc;
margin: 50px auto;
text-align: center;
line-height: 100px;
font-size: 24px;
display: none; /* 默认隐藏 */
}
</style>
</head>
<body>
<button id="hide-btn">Hide</button>
<button id="show-btn">Show</button>
<div class="dynamic-div">This is a dynamic div element.</div>
<script>
$(document).ready(function() {
$("#hide-btn").click(function() {
$(".dynamic-div").css("display", "none");
});
$("#show-btn").click(function() {
$(".dynamic-div").css("display", "block");
});
});
</script>
</body>
</html>Dalam kod di atas, kami menggunakan kaedah css() untuk mengubah suai atribut paparan elemen .dynamic-div , dengan itu mencapai Kesan menyembunyikan dan menunjukkan unsur. Apabila butang Sembunyikan diklik, elemen akan disembunyikan, dan apabila butang Tunjukkan diklik, elemen tersebut akan dipaparkan semula.
Ringkasan
Sangat mudah untuk menggunakan jQuery untuk menyembunyikan dan menunjukkan elemen div dinamik. Kita boleh menggunakan kaedah hide() dan show() untuk menyembunyikan dan menunjukkan elemen secara langsung, atau kita boleh menggunakan kaedah css() untuk mengubah suai atribut paparan elemen untuk mencapai kesan menyembunyikan dan menunjukkan. Perlu diingatkan bahawa apabila terdapat berbilang elemen div dinamik dalam halaman, kita perlu menggunakan kelas atau ID untuk menentukan elemen yang perlu disembunyikan atau dipaparkan.
Atas ialah kandungan terperinci jquery menyembunyikan dan memaparkan div dinamik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!