jQueryはシンプルなボタンの色の変更を実装します
|
HTML と CSS で、ボタンの色を設定したいとします。 目的の効果は得られますが、プロセスはかなり面倒です。 jQuery を使用すると、このタスクを簡単に実現できます。 ボタンのセットがあるとします
そのうちの 1 つをクリックするとピンク色に変わり、別のボタンをクリックすると、クリックしたボタン以外のすべてのボタンが元の色に戻ります。どうすればよいでしょうか。 実際、完了するには数行のコードしか必要ありません
<スクリプト>
$(関数(){
$('ボタン').click(function(){
//まずクリックされたボタンの色をピンクに設定します$(this).css('background','pink');
// 現在の要素以外の兄弟要素の色を「空」に設定します
//siblings は選択された現在の要素のすべての兄弟要素です（現在の要素は除く）
$(this).siblings('button').css('background','');
});
});
</スクリプト>効果は以下のとおりです。
完全なコードは次のとおりです。
<!DOCTYPE html>
<html>
<ヘッド>
<meta http-equiv="コンテンツタイプ" content="text/html; charset=utf-8" />
<title>ウェルファンシー</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<スタイル>
div{
境界線: 2px 実線ライトピンク;
マージン: 50px 自動;
パディング:50px;
}
</スタイル>
</head>
<本文>
<div>
<button>オプション 1</button>
<button>オプション 2</button>
<button>オプション 3</button>
<button>オプション 4</button>
<button>オプション 5</button>
<button>オプション 6</button>
<button>オプション 7</button>
</div>
<スクリプト>
$(関数(){
$('ボタン').click(function(){
$(this).css('背景','ピンク');
$(this).siblings('button').css('background','');
});
});
</スクリプト>
</本文>
</html>ご覧のとおり、CSS だけを使用するよりも jQuery を使用する方がはるかに簡単ではありませんか?より複雑な操作を完了するには、より短いコードを使用できます。 以下もご興味があるかもしれません:
|
<<: mysql8.0.11 winx64 インストールと設定のチュートリアル
推薦する
ウェブデザインのグラフィック構成と組版機能の紹介
すべてには基礎が必要です。家を建てるには基礎が必要です。方程式を解くには、まず九九を覚える必要があり...
Linux仮想メモリについての簡単な説明
目次起源仮想メモリページングとページテーブルメモリのアドレス指定と割り当て関数プロセスメモリ管理デー...
Nginx 500 内部サーバーエラーの解決方法
今日、Nginxを使っていたら500エラーが発生しました。エラーコードを検索してみんなに共有しました...
Linux デバイスに空き容量がありません inode の満杯により 500 エラーが発生します
iノードとは何ですか? inode を理解するには、まずファイル ストレージから始める必要があります...
Node.jsとDenoの比較
目次序文Denoとは何ですか? Node.jsとの比較建築ESモジュール依存関係の管理TypeScr...
マウスで画像を動かすJavaScript
この記事では、マウスの動きに追従する画像を実現するためのJavaScriptの具体的なコードを参考ま...
ウェブデザイン実践者必読のキャリアプラン
原文記事、転載の際は著者と出典を明記してください！ Web デザインは間違いなくテクノロジーであり、...
CSS3 変換遷移ジッター問題の解決
transform: scale(); スケーリングするとIEブラウザでジッターが発生します変換スケ...
React双方向データバインディングの原理についての簡単な説明
目次双方向データバインディングとは双方向データバインディングの実装データ影響ビュービューはデータに影...
ページネーションの例とベストプラクティス
<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...
MySQLレジストリをクリアする方法
具体的な方法： 1. [ win+r ] を押して実行ウィンドウを開き、「regedit」と入力して...
mysql5.7.21 utf8 エンコーディングの問題と Mac 環境での解決方法
1. 目標: mysql の character_set_server の値を latin1 から ...
jQueryで大画面スクロール再生効果を実現
この記事では、大画面スクロール効果を実現するためのjQueryの具体的なコードを参考までに紹介します...
iframeを指すaタグのターゲットの名前とIDの違い
コードをコピーコードは次のとおりです。 <iframe id="myFrameId&...
Html、sHtml、XHtml の違いのまとめ
たとえば、<u>には終了文字がなく、ブラウザはそれを認識します。 SHTML は Ser...