Bagaimana untuk Mencipta Butang Togol dengan Sass dan jQuery?

Mencipta Butang Togol dengan Sass dan jQuery

Jika anda ingin mencipta butang togol yang mengekalkan keadaannya semasa klik, anda Anda perlu menyelam melampaui CSS sahaja.

Pendekatan Semantik

Pendekatan pilihan ialah menggunakan kotak pilihan, menggayakannya mengikut keadaan yang ditandakan. Walau bagaimanapun, ini boleh melibatkan elemen tambahan dan kerumitan.

Penyelesaian jQuery

Kaedah yang lebih cekap ialah menggunakan jQuery dan dua imej latar belakang untuk keadaan butang yang berbeza.

HTML:

<code class="html"><a id="button" title="button">Press Me</a></code>

JS:

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

CSS:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border-top: solid 2px #eaeaea;
  border-left: solid 2px #eaeaea;
  border-bottom: solid 2px #777;
  border-right: solid 2px #777;
  padding: 5px 5px;
}

a.down {
  background: #bbb;
  border-top: solid 2px #777;
  border-left: solid 2px #777;
  border-bottom: solid 2px #eaeaea;
  border-right: solid 2px #eaeaea;
}</code>

Fungsi jQuery ini menogol kelas "bawah" pada butang apabila diklik. Kelas CSS mentakrifkan imej latar belakang dan gaya sempadan untuk setiap negeri.

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