Sass と jQuery を使用したトグル ボタンの作成
クリック時の状態を維持するトグル ボタンを作成したい場合は、次のようにします。 CSS だけを飛び越える必要があります。
セマンティックなアプローチ
推奨されるアプローチは、チェックボックスを使用し、チェックされた状態に応じてスタイル設定することです。ただし、これには追加の要素と複雑さが伴う可能性があります。
jQuery ソリューション
より効率的な方法は、さまざまなボタンの状態に jQuery と 2 つの背景イメージを使用することです。
HTML:
<code class="html"><a id="button" title="button">Press Me</a></code>
JS:
<code class="js">$(document).ready(function() { $('a#button').click(function() { $(this).toggleClass("down"); }); });</code>
CSS:
<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>
この jQuery 関数は、クリックされたときにボタンの「ダウン」クラスを切り替えます。 CSS クラスは、各状態の背景画像と境界線のスタイルを定義します。
以上がSass と jQuery を使用してトグル ボタンを作成するには?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。