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

最新推荐文章于 2024-09-20 16:55:43 发布

harry5508

最新推荐文章于 2024-09-20 16:55:43 发布

阅读量2.9w

点赞数 6

分类专栏：前端 java开发常见问题汇总文章标签： css改变样式点击改变class更改css样式 style改变样式

本文链接：https://blog.csdn.net/harry5508/article/details/82255874

版权

java开发常见问题汇总同时被 2 个专栏收录

20 篇文章 1 订阅

订阅专栏

前端

4 篇文章 6 订阅

订阅专栏

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

点击按钮改变颜色，很简单的操作：

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

大功告成。