Rumah >hujung hadapan web >tutorial js >Dua cara untuk menyembunyikan dan menunjukkan kawalan dalam kemahiran js_javascript
Terdapat dua cara untuk menyembunyikan kawalan menggunakan JavaScript, iaitu dengan menetapkan atribut "paparan" dan "keterlihatan" gaya kawalan.
Kawalan boleh dilihat apabila style.display="block" atau style.visibility="visible", dan tidak kelihatan apabila style.display="none" atau style.visibility="hidden". Perbezaannya ialah "paparan" bukan sahaja menyembunyikan kawalan, tetapi juga kawalan tersembunyi tidak lagi menduduki kedudukan yang diduduki apabila dipaparkan, manakala kawalan yang disembunyikan oleh "keterlihatan" hanya menetapkan kawalan menjadi tidak kelihatan, dan kawalan masih menduduki asalnya kedudukan.
function displayHideUI() { var ui =document.getElementById("bbs"); ui.style.display="none"; } function displayShowUI() { var ui =document.getElementById("bbs"); ui.style.display="";//display为空的话会好使,为block会使后边的空间换行 } function visibilityHideUI() { var ui =document.getElementById("bbs"); ui.style.visibility="hidden"; } function visibilityShowUI() { var ui =document.getElementById("bbs"); ui.style.visibility="visible"; } </script>
Perihalan Nilai
tiada Unsur ini tidak akan dipaparkan.
blok Elemen ini akan dipaparkan sebagai elemen peringkat blok dengan pemisah baris sebelum dan selepas elemen ini.
lalai sebaris. Elemen ini akan dipaparkan sebagai elemen sebaris tanpa pemisah baris sebelum atau selepas elemen.
blok sebaris Elemen blok sebaris. (Nilai baharu dalam CSS2.1)
list-item Elemen ini akan dipaparkan sebagai senarai.
run-in Elemen ini akan muncul sebagai elemen peringkat blok atau elemen sebaris, bergantung pada konteks.
padat Terdapat nilai padat dalam CSS, tetapi ia telah dialih keluar daripada CSS2.1 kerana kekurangan sokongan yang meluas.
penanda Terdapat penanda nilai dalam CSS, tetapi ia telah dialih keluar daripada CSS2.1 kerana kekurangan sokongan yang meluas.
jadual Elemen ini akan dipaparkan sebagai jadual peringkat blok (serupa dengan e0f397b00902e1f88579775d78d26d4e) dengan pemisah baris sebelum dan selepas jadual.
jadual sebaris Elemen ini akan dipaparkan sebagai jadual sebaris (serupa dengan e0f397b00902e1f88579775d78d26d4e) tanpa pemisah baris sebelum dan selepas jadual.
table-row-group Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan 92cee25da80fac49f6fb6eec5fd2c22a).
table-header-group Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan ae20bdd317918ca68efdc799512a9b39).
table-footer-group Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih baris (serupa dengan 06669983c3badb677f993a8c29d18845).
table-row Elemen ini akan dipaparkan sebagai baris jadual (serupa dengan a34de1251f0d9fe1e645927f19a896e8).
table-column-group Elemen ini akan dipaparkan sebagai kumpulan satu atau lebih lajur (serupa dengan 879b49175114808d868f5fe5e24c4e0b).
lajur jadual Elemen ini akan dipaparkan sebagai lajur sel (serupa dengan 581cdb59a307ca5d1e365becba940e05)
sel jadual Elemen ini akan dipaparkan sebagai sel jadual (serupa dengan b6c5a531a458a2e790c1fd6421739d1c dan b4d429308760b6c2d20d6300079ed38e)
kapsyen jadual Elemen ini akan dipaparkan sebagai tajuk jadual (serupa dengan ecff158d289ded61522d4081f43e0d0f)
inherit menentukan bahawa nilai atribut paparan harus diwarisi daripada elemen induk.
Masalah yang diselesaikan hari ini adalah untuk memberikan kelas label.error yang ditakrifkan oleh css id dalam halaman jsp, dan kemudian mengawal keterlihatan id untuk mengosongkan maklumat gesaan js apabila div runtuh. Butirannya adalah seperti berikut:
Dalam fungsi menyediakan antara muka var label1 = document.getElementById("label1");
$(document).ready(function() { $(".flipp .span4").click(function() { $(this).parent().next().toggle(); $(this).parent().parent().prevAll().find(".panel").hide(); $(this).parent().parent().nextAll().find(".panel").hide(); var label1 = document.getElementById("label1"); label1.style.display="none"; })
Kemudian tambah di tempat yang sepadan dalam jsp:
<label class="error" id="label1" for="currentPWD" generated="true" style="display:inline"></label>
Untuk kelas label.error yang ditakrifkan oleh CSS, anda boleh menggunakan $("label.error").removeAttr("style").attr("style", "display: none;"); fungsi. Selain itu, nampaknya tidak ada keperluan untuk menentukan nilai id untuk label di lokasi yang sepadan di bawah tanah.