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 サービス管理の 2 つの方法、service と systemctl の詳細な説明
1.サービスコマンドサービスコマンドは実際には/etc/init.dディレクトリに移動し、関連プログ...
MySQLカスタム関数の簡単な使用例
この記事では、例を使用して MySQL カスタム関数の使用方法を説明します。ご参考までに、詳細は以下...
CSSスコープ（スタイル分割）の使用の概要
1. CSSスコープの使用（スタイル分割） Vue では、CSS スタイルを現在のコンポーネントでの...
ウェブサイトをIE6、7、8、9の古いバージョンに対応させるための3つのソリューション
Microsoft は後からブラウザの研究開発に力を入れてきましたが、実際のところ、最新の IE ブ...
Linuxでサーバーのハードウェア情報を表示する方法
みなさんこんにちは。今日は12連休ですが、何かお買い物はしましたか？今日は「Linux View S...
良い広告にはどのような特徴が必要ですか?
広告業は人間であることに似ていると言う人がいます。これは本当です。優れた広告には、優れた人間と同じよ...
GitHub のサードパーティ認証方式を Vue で実装する例
目次OAuth アプリの作成コードを取得するaccess_tokenを取得するユーザー情報を取得する...
Linux の sudo 脆弱性により不正な特権アクセスが発生する可能性がある
Linux で新たに発見された sudo の脆弱性を悪用すると、特定のユーザーが root としてコ...
TypeScript の Enum が問題となる理由
目次どうしたの？いつ使うか列挙の数を制御するビット値コントロールインデックス非数値列挙結論はType...
ネイティブ js はフォームの定期的な検証を実装します (検証後にのみ送信)
以下の機能が実装されています。 1. ユーザー名: onfouc は msg ルールを表示します。o...
editplus の Zen コーディング例コードの説明
たとえば、次のように入力します。 XML/HTML コードdiv#ページ>(div#ヘッダー&...
スケルトンスクリーン効果を実現する CSS
ネットワーク データを読み込むときは、ユーザー エクスペリエンスを向上させるために、通常は円形の読み...
MySQLのUPDATE文の落とし穴を記録する
背景最近、オンライン操作中に DML ステートメントを実行しました。これは絶対確実だと思っていました...
Vue 折りたたみ表示の複数行テキスト コンポーネントの実装コード
折りたたみ表示の複数行テキストコンポーネント複数行のテキスト コンポーネントを折りたたんで表示し、展...
Docker+Jenkinsによる自動デプロイの実現方法
Code Cloud を使用して Git コード ストレージ ウェアハウスを構築するhttps://...