hujung hadapan web
Soal Jawab bahagian hadapan
jquery menyembunyikan dan memaparkan div dinamik
jquery menyembunyikan dan memaparkan div dinamik
May 18, 2023 pm 08:50 PMjQuery 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!
Artikel Panas
Alat panas Tag
Artikel Panas
Tag artikel panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Mar 19, 2025 pm 03:58 PM
Apa itu useeffect? Bagaimana anda menggunakannya untuk melakukan kesan sampingan?
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Mar 18, 2025 pm 01:45 PM
Bagaimanakah kari bekerja di JavaScript, dan apakah faedahnya?
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Mar 18, 2025 pm 01:44 PM
Apakah fungsi pesanan yang lebih tinggi dalam JavaScript, dan bagaimana mereka boleh digunakan untuk menulis lebih banyak kod ringkas dan boleh diguna semula?
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Mar 18, 2025 pm 01:58 PM
Bagaimanakah algoritma Rekonsiliasi React berfungsi?
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Mar 19, 2025 pm 03:59 PM
Apakah useContext? Bagaimana anda menggunakannya untuk berkongsi keadaan antara komponen?
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Mar 19, 2025 pm 04:10 PM
Bagaimana anda mengelakkan tingkah laku lalai di pengendali acara?
Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?
Mar 19, 2025 pm 04:16 PM
Apakah kelebihan dan kekurangan komponen terkawal dan tidak terkawal?
