按钮点击变色再变回原色[addClass、removeClass、toggleClass操作HTMLDOM的属性（方法）]

第一次点击加颜色

第二次点击颜色无

 

代码如下

 .header-text{

    line-height: 20px;

    display: inline-block;

    position: absolute;

    padding:0 0 0 7px;

    margin:0 3px;

    background-color: #fff;

    top:0;

    left:10px;

}

 .goods_cate_box_cont{

    overflow-x: scroll;

    display: flex;

    width:auto;

    height:20px;

    margin-left:50px;

    white-space: nowrap;

}

.goods_cate_box .cate_item {

    line-height: 20px;

    color:#666;

    padding:0 4px;

    margin:0 3px;

}

<div class="goods_cate_box_cont">

                        <input type="hidden" id="xcateids" />

                        <span class="header-text">分类：</span>

                        <div class="cate_item" v-for="item in cate_list" :data-id="item.id">{{item.name}}</div>

                    </div>

<script>

  $(document).on('click','.cate_item',function(){

                var id=$(this).attr('data-id');

                var temb_id=$("#xcateids").val();

                if(temb_id>0){

                    if(temb_id!==id){

                        $('.cate_item').removeClass('cate_active');

                        $(this).addClass('cate_active');

                    }else{

                        $('.cate_item').removeClass('cate_active');

                        id=0;

                    }

                }else{

                    $('.cate_item').removeClass('cate_active');

                    $(this).addClass('cate_active');

                }

                $("#xcateids").val(id);

                getlists();

            })

 <script>

addClass()方法不是替换元素上面得样式名，而是简单的添加一个样式类名到元素上

removeClass（）方法、删除样式，用于动态删除class类名

toggleClass（）方法切换样式、包含addClass（）方法和removeClass（）方法的效果，(执行一次相当于addClass，再执行一次相当于removeClass)