Togol Butang: HTML Semantik atau Penggayaan jQuery Tersuai - Mana Yang Terbaik?

Membuat Butang Togol: Pilihan Semantik lwn Bergaya

Butang Togol membolehkan pengguna bertukar-tukar antara dua keadaan. Walaupun HTML secara asli menyertakan input kotak semak, ia mungkin tidak sentiasa memenuhi keperluan visual yang diingini.

Pendekatan Semantik: Penggayaan Kotak Pilihan

Pendekatan semantik yang disyorkan melibatkan penggunaan kotak pilihan dan penggayaan ia berbeza berdasarkan keadaan disemaknya. Walau bagaimanapun, menggayakan kotak pilihan secara berkesan boleh menjadi mencabar.

Alternatif: jQuery dan CSS

Untuk penyelesaian yang lebih boleh disesuaikan, pertimbangkan untuk menggunakan jQuery dan CSS:

1. Tetapkan Acara Togol:

   • Tambah pengendali acara jQuery pada butang, biasanya menggunakan .click().

2. Togol Kelas CSS:

   • Gunakan .toggleClass() untuk menambah dan mengalih keluar kelas CSS yang mengubah penampilan butang (mis., "bawah").

3. Penggayaan CSS:

   • Buat kelas CSS dengan gaya sempadan dan latar belakang yang berbeza untuk setiap keadaan butang (mis., " atas" dan "bawah").

Contoh:

<code class="js">$(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 Togol Butang: HTML Semantik atau Penggayaan jQuery Tersuai - Mana Yang Terbaik?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!