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 インストールと設定のチュートリアル
推薦する
Dockerコンテナを更新、パッケージ化、Alibaba Cloudにアップロードする方法
今回は、実行中のコンテナをイメージにパッケージ化して Alibaba Cloud にアップロードし、...
MySQL サブクエリとグループ化されたクエリ
目次概要サブクエリサブクエリの分類クエリの結果によるとサブクエリの位置で区別する選択後のサブクエリサ...
MySQL の undo、redo、binlog の違いを簡単に分析します
目次序文【ログ取り消し】 【REDOログ】 【バイナリログ】要約する序文MySQL には、REDO ...
Linux がますます人気になっている 10 の理由
Linux はますます多くのユーザーに愛されてきました。なぜ Linux はこれほど急速に発展し、い...
MySQLアカウントのIP制限条件を変更する方法
序文最近、仕事で、MySQL ユーザーの権限を変更するには、特定の IP アドレスへのアクセスを制限...
ネイティブJSが様々なスポーツの均一な動きを実現
この記事では、ネイティブ JS で実装された均一なモーションを紹介します。その効果は次のとおりです。...
vue3で注意すべき2つのポイントを詳しく解説:セットアップ
目次vue2の場合vue3ではセットアップに関する注意事項セットアップライフサイクルは、before...
WeChatアプレットがチャットルーム機能を実現
この記事では、参考のために、WeChatアプレットのチャットルームを実装するための具体的なコードを例...
Vue でよく使われる高階関数と包括的な例
1. 配列のよく使われる高階関数配列があり、その配列に対して次の操作を実行したいとします。 100 ...
Linux でログインタイムアウト後に非アクティブなユーザーを自動的にログアウトする
方法1: .bashrcまたは.bash_profileファイルを変更するこれは、ホーム ディレクト...
MySQLdump コマンドを使用した MySQL データの移行
このソリューションの利点はシンプルさと使いやすさですが、欠点はダウンタイムが長くなることです。 した...
CSS3 で背景ぼかしを実現する 3 つの方法 (要約)
1. 通常の背景ぼかしコード： <スタイル> html, 体 { 幅: 100%; 高...
CSS3 弾性拡張ボックスの詳細な説明
使用フレキシブル ボックスはフロントエンドの Web ページ レイアウトで重要な役割を果たしますが、...
JavaベースのMySQLバックアップテーブル操作
コアはmysqldumpとランタイムです操作は実際にはそれほど難しくありません。バックアップ操作を実...
Vue の NetEase Cloud Music Player インターフェースを模倣したシンプルな実装プロセス
仕事のプロジェクトのニーズにより、曲の再生が必要となり、さまざまな資料を参考にして、NetEase ...