Bagaimana untuk menyembunyikan dan menunjukkan elemen dalam CSS

Dalam pembangunan web, selalunya perlu untuk menyembunyikan atau menunjukkan elemen tertentu, seperti menu, kotak gesaan, dsb. Walaupun JavaScript boleh mencapai fungsi ini, kadangkala kami tidak mahu memperkenalkan terlalu banyak skrip atau mengehadkan keserasian penyemak imbas. Teknik klik-untuk-tunjuk-sembunyikan CSS boleh digunakan untuk menyembunyikan dan menunjukkan elemen menggunakan CSS tanpa menggunakan JavaScript.

Bagaimana untuk menggunakan teknik klik-untuk-tunjuk-sembunyikan CSS?

Pertama, tetapkan elemen untuk disembunyikan untuk dipaparkan: tiada;, contohnya:

  <div id="myDiv" style="display: none;">
    这是被隐藏的元素。
  </div>

Kedua, tambahkan pencetus, seperti butang atau pautan, supaya apabila pengguna klik, elemen tersembunyi Elemen akan dipaparkan. Untuk mencapai kesan ini, anda perlu menggunakan :checked pseudo-class dan ~ sibling selector dalam CSS.

  <input type="checkbox" id="toggle" />
  <label for="toggle">点我显示</label>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #toggle {
      display: none;
    }

    #toggle:checked ~ #myDiv {
      display: block;
    }
  </style>

Dalam contoh ini, kami menggunakan elemen kotak semak sebagai pencetus. Apabila kotak semak ini dipilih, elemen tersembunyi akan dipaparkan. Kesan ini dicapai melalui :checked pseudo-class dan ~ sibling selector dalam CSS. Apabila kotak pilihan dipilih, elemen saudaranya #myDiv dipaparkan.

Jika anda ingin menggunakan pautan atau butang sebagai pencetus, anda boleh mempunyai kod berikut:

  <a href="#myDiv" id="toggle">点我显示</a>

  <div id="myDiv">
    这是被隐藏的元素。
  </div>

  <style>
    #myDiv {
      display: none;
    }

    #toggle:focus ~ #myDiv {
      display: block;
    }
  </style>

Dalam contoh ini, kami menggunakan elemen pautan sebagai pencetus. Apabila pautan menerima fokus, elemen tersembunyi didedahkan. Kesan ini dicapai melalui :focus pseudo-class dan ~ sibling selector dalam CSS. Apabila pautan menerima fokus, elemen saudaranya #myDiv dipaparkan.

Anda juga boleh menggunakan elemen label dengan kandungan teks biasa sebagai pencetus hanya bungkusnya dalam elemen label dan arahkan atribut for ke id elemen yang anda ingin paparkan.

Ringkasan

Teknik klik-untuk-tunjuk-sembunyi CSS ialah kaedah berguna yang boleh digunakan untuk menyembunyikan dan menunjukkan elemen dengan menggunakan CSS tanpa menggunakan JavaScript. Dengan menggunakan :checked pseudo-class dan ~ sibling selector atau :focus pseudo-class dan ~ sibling selector, kita boleh menambah kefungsian tersembunyi klik untuk tunjukkan pada mana-mana elemen dengan mudah.

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