フロントエンド開発実装(四)ボタン選択後の色変化
1057 ワード
今日私が実現するボタンのダイナミックな選択は、1列のボタンの中であるボタンを選択すると、このボタンは変色し、他のボタンは元の色に戻り、自分がどのボタンを選択したのか、自分が何をしたのかを知ることを目的としています.
機能は実は難しくなく、jQueryの機能を使うだけで実現できます.
考えを分析し、thisを用いて現在どのボタンが選択されているかを判断し、$()を用いる.cssは現在のボタンの色を変更し、修正する前に判断する必要があります.まず、選択されていないボタンの色をデフォルトの色に変更します.これは、前に選択したボタンスタイルを復元することを目的としています.これにより、どのボタンを選択するか、どのボタンを選択して色を変える効果があります.
下のコード:html
ここではボタンの一部のコードだけを押して、他の部分は明らかにしにくいです.
備考:IDセレクタを使用した方法
jsコード:
機能は実は難しくなく、jQueryの機能を使うだけで実現できます.
考えを分析し、thisを用いて現在どのボタンが選択されているかを判断し、$()を用いる.cssは現在のボタンの色を変更し、修正する前に判断する必要があります.まず、選択されていないボタンの色をデフォルトの色に変更します.これは、前に選択したボタンスタイルを復元することを目的としています.これにより、どのボタンを選択するか、どのボタンを選択して色を変える効果があります.
下のコード:html
one
two
three
ここではボタンの一部のコードだけを押して、他の部分は明らかにしにくいです.
備考:IDセレクタを使用した方法
jsコード:
function SupendButtonClick(obj) {
//
$('div[id^="SupendButton-"]').css("background-color", "#4cb0f9");//
//
$(obj).css("background-color", "red");
}