ホームページ > ウェブフロントエンド > CSSチュートリアル > Sass と jQuery を使用してトグル ボタンを作成するには?

Sass と jQuery を使用してトグル ボタンを作成するには?

Barbara Streisand
リリース: 2024-11-02 02:26:02
オリジナル
278 人が閲覧しました

How to Create a Toggle Button with Sass and jQuery?

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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート