-------------点击当前class删除旧class属性------------------

首先给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");

        });

    });

大功告成。

---------------------