フロントエンド開発実装(四)ボタン選択後の色変化

1057 ワード

今日私が実現するボタンのダイナミックな選択は、1列のボタンの中であるボタンを選択すると、このボタンは変色し、他のボタンは元の色に戻り、自分がどのボタンを選択したのか、自分が何をしたのかを知ることを目的としています.
機能は実は難しくなく、jQueryの機能を使うだけで実現できます.
考えを分析し、thisを用いて現在どのボタンが選択されているかを判断し、$()を用いる.cssは現在のボタンの色を変更し、修正する前に判断する必要があります.まず、選択されていないボタンの色をデフォルトの色に変更します.これは、前に選択したボタンスタイルを復元することを目的としています.これにより、どのボタンを選択するか、どのボタンを選択して色を変える効果があります.
下のコード:html

one

two

three


ここではボタンの一部のコードだけを押して、他の部分は明らかにしにくいです.
備考:IDセレクタを使用した方法
jsコード:
    function SupendButtonClick(obj) {
        //            
        $('div[id^="SupendButton-"]').css("background-color", "#4cb0f9");//      
        //     
        $(obj).css("background-color", "red");
    }