CSS と JavaScript を使用して押し下げられたトグルボタンを作成する方法-CSSチュートリアル-php.cn

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

ホームページ

ウェブフロントエンド

CSSチュートリアル

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

Nov 02, 2024 am 09:39 AM

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">&lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&quot;&gt;&lt;/script&gt;
&lt;a id=&quot;button&quot; title=&quot;button&quot;&gt;Press Me&lt;/a&gt;</code>

ログイン後にコピー

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

このウェブサイトの声明

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