关于点击改变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;
改变button按钮的形状
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5));
background: -moz-linear-gradient(top,  #00adee,  #0078a5);
filter:  progid:adient(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:adient(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");
});
});
⼤功告成。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。