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 インストールと設定のチュートリアル
推薦する
MySQL関数の簡単な紹介
目次1. 数学関数2. 文字列関数3. 日付関数4. 暗号化機能主な MySQL 関数は次のように紹...
HTML にオーディオファイルを挿入してブラウザで再生する場合の互換性の問題
HTML にオーディオ ファイルを挿入した後 (mp3 ファイルを再生した後) に発生したいくつかの...
Dockerイメージをプルしてバージョンを確認する方法
イメージのバージョンとタグを確認するには、docker hubで確認する必要があります。アドレスは次...
Vue3はJingdong製品詳細ページの虫眼鏡効果コンポーネントをカプセル化します
この記事では、Jingdong製品詳細ページの虫眼鏡効果コンポーネントに似たvue3カプセル化の具体...
jQueryはHTML要素の非表示と表示を実装します
商品を検索するときに、すべてのブランドまたは一部のブランドを表示するTaobaoの機能を真似してみま...
Linux NFSメカニズムの動作原理と例の分析
NFS とは何ですか?ネットワークファイルシステムネットワーク上でファイルを保存および整理するための...
ubuntu20.04 LTS システムのデフォルト ソース ソース リスト ファイルの変更
誤って source.list の内容を変更し、一連のエラーが発生した場合は、デフォルトのソース フ...
MySQL アップグレードのベストプラクティス
MySQL 5.7 には、オンライン DDL、マルチソース レプリケーション、拡張された半同期、テー...
MySQLの自己接続と結合の詳細な理解
1. MySQL 自己接続MySQL では、情報を照会するときに自分自身に接続 (自己接続) する必...
Vueタイムラインコンポーネントの使い方
この記事の例では、参考までにvueタイムラインコンポーネントの具体的な実装コードを共有しています。具...
jsを使用して中国語からピンインへの変換の完全な手順を実行します
jsを使用して、中国語をピンインに変換するパッケージを作成しました。倉庫のアドレスはpinyin-p...
ウェブデザインにおける画像フォーマットとデザインの関係を詳しく説明
なぜこの領域のコンテンツを整理したいのでしょうか。それは、油絵の具とキャンバスを理解する必要があり、...
W3Cチュートリアル（1）：W3Cを理解する
1994 年に設立された組織である W3C は、共通プロトコルの開発を促進し、それらの相互運用性を確...
MySQL テーブル構造を Excel にエクスポートする方法
要件は次のとおりですテーブル構造、フィールドコメント情報、テーブル名などをエクスポートします。これは...
Vue で計算プロパティを使用する際の知識ポイントのまとめ
計算されたプロパティ場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなり...