Rumah > hujung hadapan web > tutorial css > 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
Lepaskan: 2024-10-31 09:02:01
asal
637 orang telah melayarinya

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>
Salin selepas log masuk
<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>
Salin selepas log masuk
<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>
Salin selepas log masuk

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 Laman Web ini
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
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan