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 インストールと設定のチュートリアル
推薦する
マインスイーパゲームを実装するための jQuery プラグイン (2)
この記事では、jQueryプラグインを使用してマインスイーパゲームを実装する2番目の記事を参考までに...
nginx をベースにした Web クラスター プロジェクトをすばやく構築する方法を説明します。
目次1. プロジェクト環境2. プロジェクトの説明3. プロジェクトの手順1. インストール2. 構...
MySQLトリガーの概念、原理、使用法の詳細な説明
この記事では、例を使用して、MySQL トリガーの概念、原則、および使用方法を説明します。ご参考まで...
MySQL で主キーと ROWID を使用する際の落とし穴の概要
序文MySQL の rowid の概念については聞いたことがあるかもしれませんが、テストや実践が難し...
Windows10システムにスーパーセットをインストールする手順
Superset は、エレガントなインターフェースとデータ テーブルに基づく動的なデータ生成を主な機...
Dockerはdockerfileを使用してnode.jsアプリケーションを起動します
Dockerfileの作成expressによって自動的に作成されたディレクトリを例にとると、ディレク...
Nginx ストリーム構成プロキシ (Nginx TCP/UDP ロード バランシング)
序章nginx が優れたリバース プロキシ サービスであることは誰もが知っています。nginx を使...
IDEA が MySQL データベースに接続できない問題の 6 つの解決策
この記事では、IDEA が MySQL データベースに接続できない問題に対する 6 つの解決策を主に...
Docker で PostgreSQL を実行し、いくつかの接続ツールを推奨する
1 はじめに PostgreSQL は、非常に充実した機能を備えたフリーソフトウェアのオブジェクトリ...
Ubuntu 18仮想マシンのクローン作成後に同じIPアドレスになる問題の解決方法
序文最近、仮想マシンを使用して Ubuntu 18.04 をインストールしました。クローン作成後、I...
JSは円形のプログレスバーのドラッグとスライドを実装します
この記事の例では、円形のプログレスバーのドラッグアンドスライドを実現するための具体的なJSコードを紹...
Vueはシンプルなショッピングカートの例を実装します
この記事では、参考までに、Vue の具体的なコードを共有して、簡単なショッピングカートを実装します。...
MySQL 8.0.11 のインストールと設定方法のグラフィックチュートリアル MySQL 8.0 の新しいパスワード認証方法
この記事では、参考までにMySQL8.0.11のインストールと設定方法、およびMySQL8.0の新し...
MySQL での重複キー更新時の replace into と insert into の使用法と相違点の分析
この記事では、MySQL での重複キー更新時の replace into と insert into...
WeChatアプレットでラッキーホイールゲームを実装する方法
ここでは主に、WeChat アプレットでラッキーホイール ゲームを開発する方法を紹介します。主に J...