トグル ボタン: セマンティック HTML またはカスタム jQuery スタイル - どちらが最適ですか?

トグル ボタンの作成: セマンティック オプションとスタイリッシュなオプション

トグル ボタンを使用すると、ユーザーは 2 つの状態を切り替えることができます。 HTML にはネイティブにチェックボックス入力が含まれていますが、必要な視覚的要件を常に満たしているとは限りません。

セマンティック アプローチ: チェックボックスのスタイリング

推奨されるセマンティック アプローチには、チェックボックスとスタイルの使用が含まれます。チェックされた状態に応じて異なります。ただし、チェックボックスを効果的にスタイル設定するのは難しい場合があります。

代替: jQuery と CSS

よりカスタマイズ可能なソリューションについては、jQuery と CSS の使用を検討してください:

1. Toggle Event の割り当て:

   • 通常 .click() を使用して、jQuery イベント ハンドラーをボタンに追加します。

2. CSS クラスの切り替え:

   • ボタンの外観 (「下」など) を変更する CSS クラスを追加および削除するには、.toggleClass() を使用します。

3. CSS スタイル:

   • ボタンの状態ごとに異なる境界線と背景のスタイルを持つ CSS クラスを作成します (例: "

例:

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

以上がトグル ボタン: セマンティック HTML またはカスタム jQuery スタイル - どちらが最適ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。