Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Butang Togol dengan Sass dan jQuery?

Bagaimana untuk Mencipta Butang Togol dengan Sass dan jQuery?

Barbara Streisand
Barbara Streisandasal
2024-11-02 02:26:02275semak imbas

How to Create a Toggle Button with Sass and 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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn