前端开发实现（四） 按钮选中后颜色变化

今天我要实现的按钮的动态选中，就是说在一排按钮中选中某个按钮，这个按钮就会变色，其他按钮恢复原来颜色，目的是为了让人知道自己选中了哪个按钮，知道自己做了什么。

功能其实不是很难，只需要使用jQuery的功能就能实现：

分析一下思路，使用this进行判断当前是哪个按钮被选中了，然后用$().css改变当前按钮的颜色，在进行修改前需要进进行一个判断，首先把所有未被选中的按钮的颜色改变为默认颜色，这样做的目的是将之前选中的按钮样式还原。借此起到选中哪个按钮，哪个按钮改变颜色的效果。

下面上代码：html

<div id="SupendButton-one" class="button button-primary button-small " onclick=SupendButtonClick(this);>
        <p>one</p>
    </div>
    <div id="SupendButton-two" class="button button-primary button-small "onclick=SupendButtonClick(this);>
        <p>two</p>
    </div>
    <div id="SupendButton-three" class="button button-primary button-small " onclick=SupendButtonClick(this);>
        <p>three</p>
    </div>

这里就只上按钮部分代码，其他部分不方便透露

备注：使用了ID选择器的方法

js代码：

    function SupendButtonClick(obj) {
        //清空其它同类按钮选中颜色
        $('div[id^="SupendButton-"]').css("background-color", "#4cb0f9");//按钮原来颜色
        //点击后变色
        $(obj).css("background-color", "red");
    }