Butang tersembunyi HTML: Sembunyikan dan tunjukkan butang menggunakan CSS

Dalam pembangunan web, menyembunyikan butang adalah keperluan yang sangat biasa. Kadangkala kita perlu menyembunyikan beberapa item tindakan dan memaparkannya apabila diperlukan dan bukannya menduduki ruang halaman sepanjang masa. Dalam kes ini, kita boleh menggunakan CSS untuk menyembunyikan dan menunjukkan butang.

Begini cara untuk melakukannya:

1. Tambah teg "butang sembunyi" dalam HTML

<button class="hide-btn">隐藏按钮</button>

2. Gunakan CSS untuk menetapkan butang Gaya dan sifat

.hide-btn {
  position: absolute;
  top: -9999px;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  cursor: pointer;
}

Kod CSS di atas menetapkan kedudukan butang di luar halaman dan juga menetapkan lebar, ketinggian, ketelusan dan gaya penunjuk tetikus. Sifat ini menjadikan butang tidak kelihatan pada halaman, tetapi masih boleh diklik.

3. Buat pengawal yang memaparkan butang

<button class="show-btn">显示按钮</button>

Butang ini boleh diklik oleh pengguna dan apabila pengguna mengklik ia akan mencetuskan paparan "tersembunyi butang" label .

4. Tetapkan gaya dan tingkah laku pengawal

.show-btn {
  cursor: pointer;
}

var hideBtn = document.querySelector('.hide-btn');
var showBtn = document.querySelector('.show-btn');

showBtn.addEventListener('click', function() {
  hideBtn.style.position = 'static';
});

Di sini kami menambah acara klik pada butang pengawal Apabila pengguna mengkliknya, The Kedudukan label "Sembunyikan Butang" ditetapkan kepada statik supaya ia muncul pada halaman.

5. Tambah kesan animasi (pilihan)

Jika anda ingin menjadikan penampilan dan kehilangan butang ini lebih lancar, kami boleh menggunakan kesan animasi CSS. Sebagai contoh, apabila pengguna mengklik "Tunjukkan Butang", biarkan label "Sembunyikan Butang" muncul dalam cara pudar:

.hide-btn {
  ...
  transition: opacity 1s;
}

.hide-btn.visible {
  opacity: 1;
}

showBtn.addEventListener('click', function() {
  hideBtn.classList.add('visible');
});

Di sini kami menggunakan atribut peralihan CSS untuk menetapkan kelegapan nilai daripada nilai kelegapan kepada Kesan peralihan dengan nilai kelegapan lain. Pada masa yang sama, kami juga mencipta kelas .visible Apabila pengguna mengklik "Show Button", kami menambahkannya pada label "Hide Button", yang akan mencetuskan kesan peralihan dalam CSS.

Ringkasan

Sangat mudah untuk menggunakan CSS untuk menyembunyikan dan menunjukkan butang. Kita hanya perlu menetapkan kedudukan label "butang tersembunyi" di luar halaman, dan kemudian gunakan pengawal untuk menukar kedudukannya, atau gunakan kesan animasi CSS untuk menjadikannya kelihatan dan hilang dengan lebih lancar. Kaedah ini bukan sahaja mudah dan praktikal, tetapi juga tidak memberi kesan kepada prestasi dan kelajuan memuatkan halaman.

Atas ialah kandungan terperinci Butang tersembunyi HTML: Sembunyikan dan tunjukkan butang menggunakan CSS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!