Bagaimana untuk melaksanakan penyembunyian klik dalam css

Css click-to-hide ialah fungsi yang sangat praktikal yang boleh mencapai beberapa kesan interaktif khusus pada halaman web, menjadikan halaman web lebih cantik dan lebih mudah digunakan. Berikut akan memperkenalkan secara terperinci kaedah pelaksanaan dan senario aplikasi penyembunyian klik CSS.

1. Kaedah pelaksanaan

1 Gunakan paparan atribut CSS

Ini ialah kaedah pelaksanaan yang paling asas ia dalam CSS Gunakan atribut display:none untuk menyembunyikannya dan gunakan JavaScript untuk mengawal paparannya dan menyembunyikannya apabila diperlukan.

Berikut ialah contoh khusus:

Kod HTML:

<div id="hide">这里是需要隐藏的内容</div>
<button onclick="toggle()">点我隐藏/显示</button>

Kod CSS:

#hide{
    display:none;
}

Kod JavaScript:

function toggle() {
    var hide = document.getElementById("hide");
    if (hide.style.display === "none") {
        hide.style.display = "block";
    } else {
        hide.style.display = "none";
    }
}

2. Gunakan atribut CSS visibility:hidden

Kaedah pelaksanaan ini pada asasnya sama dengan kaedah pertama, kecuali atribut CSS digantikan dengan visibility:hidden. Perbezaan utama ialah elemen tersembunyi menggunakan visibility:hidden mengekalkan jejaknya dan tidak menjejaskan reka letak elemen sekeliling.

Berikut ialah contoh khusus:

Kod HTML:

<div id="hide">这里是需要隐藏的内容</div>
<button onclick="toggle()">点我隐藏/显示</button>

Kod CSS:

#hide{
    visibility:hidden;
}

Kod JavaScript:

function toggle() {
    var hide = document.getElementById("hide");
    if (hide.style.visibility === "hidden") {
        hide.style.visibility = "visible";
    } else {
        hide.style.visibility = "hidden";
    }
}

3. Gunakan kelegapan atribut CSS3

Pelaksanaan ini menggunakan kelegapan atribut CSS3 baharu, yang boleh menetapkan kelegapan elemen untuk menyembunyikan dan memaparkan elemen. Perbezaan daripada paparan dan keterlihatan ialah elemen yang disembunyikan menggunakan kelegapan masih akan wujud pada halaman dan mengambil ruang, tetapi kandungannya tidak akan kelihatan.

Berikut ialah contoh khusus:

Kod HTML:

<div id="hide">这里是需要隐藏的内容</div>
<button onclick="toggle()">点我隐藏/显示</button>

Kod CSS:

#hide{
    opacity:0;
}

Kod JavaScript:

function toggle() {
    var hide = document.getElementById("hide");
    if (hide.style.opacity === "0") {
        hide.style.opacity = "1";
    } else {
        hide.style.opacity = "0";
    }
}

2. Senario aplikasi

1 Kembangkan dan runtuhkan menu

Dalam tapak web, selalunya perlu untuk mengembangkan dan meruntuhkan beberapa item menu. bersembunyi untuk mencapai ini. Kaedah pelaksanaan khusus adalah untuk menambah butang dalam bar tajuk setiap item menu, yang boleh menukar paparan dan menyembunyikan kandungan yang sepadan apabila diklik.

2. Karusel imej

Dalam tapak web, selalunya perlu untuk mencapai kesan karusel imej Dalam kes ini, anda boleh menggunakan klik untuk sembunyikan CSS untuk mencapai ini. Kaedah pelaksanaan khusus ialah meletakkan bekas pada halaman dan kemudian meletakkan imej yang perlu diputar ke dalamnya. Dengan menetapkan lebar dan ketinggian bekas, serta kedudukan imej karusel, dan mengawal paparan dan menyembunyikan imej yang berbeza melalui JavaScript, kesan karusel imej dicapai.

3.tab TAB

Dalam tapak web, selalunya perlu untuk mencapai kesan tab TAB Dalam kes ini, anda boleh menggunakan CSS klik-untuk-sembunyi untuk mencapai ini. Kaedah pelaksanaan khusus adalah untuk menambah butang dalam bar tajuk setiap tab, yang boleh menukar paparan dan menyembunyikan kandungan yang sepadan apabila diklik.

Ringkasnya, CSS click-to-hide ialah fungsi yang sangat praktikal, yang boleh digunakan untuk mencapai beberapa kesan interaktif khusus dalam halaman web dan meningkatkan keindahan dan kemudahan penggunaan tapak web. Perlu diingatkan bahawa kaedah pelaksanaan yang berbeza mempunyai ciri yang berbeza dan harus dipilih mengikut keperluan sebenar.

Atas ialah kandungan terperinci Bagaimana untuk melaksanakan penyembunyian klik dalam css. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!