Bagaimana untuk bertukar antara menunjukkan dan menyembunyikan div dalam CSS

CSS ialah salah satu kemahiran yang mesti dikuasai oleh pembangunan bahagian hadapan, dan bertukar antara menunjukkan dan menyembunyikan div adalah bahagian pentingnya. Artikel ini akan memperkenalkan secara terperinci cara menukar antara menunjukkan dan menyembunyikan div dalam CSS.

1. Gunakan atribut paparan untuk menunjukkan dan menyembunyikan div

Dalam CSS, cara yang paling biasa digunakan untuk bertukar antara menunjukkan dan menyembunyikan div ialah menggunakan atribut paparan. Paparan boleh mengawal keterlihatan dan kebolehungkapan elemen Kesan div tersembunyi yang kita perlukan dicapai melalui atribut ini.

Nilai paparan yang biasa digunakan ialah: blok, sebaris, blok sebaris, tiada, dsb., antaranya tiada satu pun yang menjadi kunci untuk menyembunyikan div.

Kod CSS adalah seperti berikut:

.hide {
    display: none;
}
.show {
    display: block;
}

Sembunyikan dicapai dengan menetapkan atribut paparan elemen .hide kepada tiada dan paparan dicapai dengan menetapkan atribut paparan . tunjukkan elemen untuk disekat.

Untuk mengawal paparan dan penyembunyian div, kami boleh menggunakan JavaScript atau jQuery untuk mengakses kelas CSS ini dan menambah atau mengalih keluarnya jika perlu.

Contohnya:

Kod HTML:

<button id="hidden_btn">点击隐藏</button>
<div id="hidden_div" class="hide">隐藏文本</div>

Kod JS:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Di sini kami menggunakan kaedah toggleClass() jQuery untuk menukar kelas , apabila butang diklik, kaedah ini akan mengalih keluar kelas .hide daripada editor dan menambah kelas .show, dengan itu menukar div daripada tersembunyi kepada dipaparkan.

2. Gunakan atribut keterlihatan untuk menunjukkan dan menyembunyikan div

Atribut keterlihatan, seperti atribut paparan, boleh digunakan untuk mengawal keterlihatan elemen adalah: kelihatan, tersembunyi, runtuh.

Apabila kami menyembunyikan elemen menggunakan atribut keterlihatan, elemen itu masih mengambil ruang dalam dokumen HTML dan hanya menjadi telus atau tidak kelihatan secara visual, tetapi saiz dan kedudukannya masih wujud pada halaman.

Kod CSS adalah seperti berikut:

.hide {
    visibility: hidden;
}
.show {
    visibility: visible;
}

Contoh kod CSS adalah serupa dengan contoh paparan menggunakan atribut paparan Di sini kita hanya bercakap tentang kod JS:

Kod JS:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Juga gunakan kaedah toggleClass() untuk menukar kelas.

3. Gunakan atribut kelegapan untuk menunjukkan dan menyembunyikan div

Atribut kelegapan digunakan untuk menetapkan julat nilainya dari 0.0 hingga 1.0, dengan 0.0 bermaksud bahawa elemen adalah telus sepenuhnya, dan 1.0 bermakna elemen itu benar-benar lutsinar.

Kod CSS adalah seperti berikut:

.hide {
    opacity: 0;
    height: 0;
    overflow: hidden;
}
.show {
    opacity: 1;
    height: auto;
}

Selain menggunakan atribut kelegapan, kami juga mentakrifkan atribut ketinggian dan limpahan untuk menyelesaikan masalah meninggalkan ruang apabila menyembunyikan div.

Apabila kelas hide digunakan, ketinggian div akan ditetapkan kepada 0 dan kandungan akan disembunyikan. Untuk melaraskan ketinggian secara automatik selepas bertukar, kami menetapkan ketinggian kepada auto dalam kelas .show, supaya div akan melaraskan secara automatik dan kelihatan apabila bertukar.

Lihat kod JavaScript sekali lagi:

Kod JS:

$(document).ready(function() {
    $("#hidden_btn").click(function() {
        $("#hidden_div").toggleClass("hide");
        $("#hidden_div").toggleClass("show");
    });
});

Juga gunakan kaedah toggleClass().

4. Ringkasan

Di atas ialah tiga cara utama untuk menunjukkan dan menyembunyikan div dalam CSS Mereka menggunakan atribut paparan, atribut keterlihatan dan atribut kelegapan. Dalam aplikasi praktikal, kita perlu memilih kaedah yang hendak digunakan berdasarkan keperluan khusus.

Selain itu, nilai yang menggabungkan keterlihatan dan paparan sering digunakan - visibility:hidden;display:none Nilai ini menjadikan elemen tidak kelihatan dan tidak menempati ruang skrin Ini lebih baik daripada Kelebihan menggunakan paparan :tiada ialah kod JS boleh mendapatkan maklumat kedudukan elemen apabila memanggilnya. Walau bagaimanapun, apabila visibility:hidden;display:none digunakan, elemen tidak lagi akan bertindak balas kepada peristiwa klik, yang mungkin menjejaskan aplikasi anda. Oleh itu, anda perlu memilih mengikut situasi tertentu semasa menggunakannya.

Ringkasnya, anda perlu menguasai dan mahir menggunakan sifat CSS untuk menjadikan halaman web yang dibangunkan lebih baik dari segi kesan visual, meningkatkan pengalaman pengguna dan meletakkan asas yang kukuh untuk pembangunan JS seterusnya .

Atas ialah kandungan terperinci Bagaimana untuk bertukar antara menunjukkan dan menyembunyikan div dalam CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!