CSS と JavaScript を使用して押し下げられたトグル ボタンを作成する方法

インタラクティブなトグル ボタンのスタイル設定

クリックすると押したままになるトグル ボタンを作成することは、純粋な CSS では直接実現できません。この効果を実現するには、HTML、CSS、JavaScript の組み合わせが必要です。

HTML と CSS の使用:

基礎となるセマンティック要素としてチェックボックスを使用することを検討してください。チェックされているかどうかに基づいてスタイルが異なります。ただし、このアプローチでは、HTML と CSS がさらに複雑になる可能性があります。

jQuery の使用:

より良い解決策は、jQuery を使用することです。これは、ボタンのスタイルを 2 つの状態の間で切り替えるコンパクトな関数です:

<code class="js">$(document).ready(function() {
  $('a#button').click(function() {
    $(this).toggleClass("down");
  });
});</code>

関連付けられた CSS:

トグル ボタンのスタイルを設定するには、次の CSS を使用します:

<code class="css">a {
  background: #ccc;
  cursor: pointer;
  border: solid 2px;
  padding: 5px;
}

a.down {
  background: #bbb;
  border-color: #777 #777 #eaeaea #eaeaea;
}</code>

HTML:

最後に、jQuery ライブラリを組み込み、次の HTML スニペットを使用してボタンを実装します:

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

以上がCSS と JavaScript を使用して押し下げられたトグル ボタンを作成する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。