Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk Mencipta Butang Togol dengan Kesan Push-In dan Pop-Out Menggunakan HTML dan CSS?

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

DDD
DDDasal
2024-10-31 09:02:01434semak imbas

How to Create a Toggle Button with a Push-In and Pop-Out Effect Using HTML and 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!

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