ホームページ  >  記事  >  ウェブフロントエンド  >  CSS と JavaScript を使用して押し下げられたトグル ボタンを作成する方法

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

Patricia Arquette
Patricia Arquetteオリジナル
2024-11-02 09:39:02555ブラウズ

How to Create a Depressed Toggle Button with CSS and 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 サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。