Bagaimana untuk Mencipta Butang Togol Tertekan dengan CSS dan JavaScript?

Menggayakan Butang Togol Interaktif

Mencipta butang togol yang kekal tertekan apabila diklik tidak boleh dicapai secara langsung dengan CSS tulen. Untuk mencapai kesan ini, gabungan HTML, CSS dan JavaScript diperlukan.

Menggunakan HTML dan CSS:

Pertimbangkan untuk menggunakan kotak pilihan sebagai elemen semantik asas. Gayakannya secara berbeza berdasarkan sama ada ia ditandakan atau tidak. Walau bagaimanapun, pendekatan ini mungkin melibatkan kerumitan HTML dan CSS tambahan.

Menggunakan jQuery:

Penyelesaian yang lebih baik ialah menggunakan jQuery. Berikut ialah fungsi padat yang menogol penggayaan butang antara dua keadaan:

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

CSS Berkaitan:

Untuk menggayakan butang togol, gunakan yang berikut CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border: solid 2px;
  padding: 5px;
}

a.down {
  background: #bbb;
  border-color: #777 #777 #eaeaea #eaeaea;
}</code>

HTML:

Akhir sekali, sertakan pustaka jQuery dan gunakan coretan HTML berikut untuk melaksanakan butang:

<code class="html"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="button" title="button">Press Me</a></code>

Atas ialah kandungan terperinci Bagaimana untuk Mencipta Butang Togol Tertekan dengan CSS dan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!