Bagaimana untuk Mencipta Butang Togol dengan Kesan Push-In dan Pop-Out Menggunakan HTML dan CSS?

Membuat Butang Togol dalam HTML dan CSS

Soalan:

Bagaimana saya boleh mencipta butang togol dalam HTML menggunakan CSS yang kekal ditolak masuk apabila diklik dan muncul apabila diklik sekali lagi?

Jawapan:

Melaksanakan penyelesaian CSS tulen untuk butang togol berfungsi adalah mencabar. Pendekatan alternatif ialah menggunakan kotak pilihan yang digayakan menggunakan CSS dan ditambah dengan JavaScript.

Pelaksanaan jQuery:

Penyelesaian yang disyorkan melibatkan fungsi jQuery yang ringkas dan dua imej latar belakang untuk menandakan keadaan butang yang berbeza. Berikut ialah contoh:

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

<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>

<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 dengan Kesan Push-In dan Pop-Out Menggunakan HTML dan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!