关于点击改变Class，修改css样式

做个后台管理某模块筛选，产品说要让运营管理起来舒服一些。= =

点击按钮改变颜色，很简单的操作，我前端太弱，决定试一试：

首先给button按钮添加class：

<button id="audit" class="btn-default">审核中</button>
<button id="auditCompletion" class="btn-default">审核完成</button>
<button id="auditReject" class="btn-default">审核驳回</button>
<button id="flush" class="btn-primary">全部</button>

然后绑定样式：

 <style type="text/css">
        .btn-primary {
            color: #d9eef7;
            border: solid 1px #0076a3;
            background: #0095cd;
            background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
            background: -moz-linear-gradient(top,  #00adee,  #0078a5);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#00adee', endColorstr='#0078a5');
        }
        .btn-default {
            color: #606060;
            border: solid 1px #b7b7b7;
            background: #fff;
            background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ededed));
            background: -moz-linear-gradient(top,  #fff,  #ededed);
            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed');
        }

    </style>

接着写js代码，点击class改变样式：

原理就是点击有这个class的按钮，出发点击事件，删除原有class(也就是样式)，再添加上新的class。然后遍历删除其他有新class的按钮(保证只有一个突出)，再给他，它们加上旧的class. 

$(function () {
        $(".btn-default").click(function () {
            $(this).removeClass("btn-default");
            $(this).addClass("btn-primary");
            $(this).siblings().removeClass("btn-primary");
            $(this).siblings().addClass("btn-default");
        });
    });

大功告成啦~~来自菜鸟的开心