实现点击动态添加样式

 <div class="button-newlist button-newlist-this"  id="0" >
         <span>第一会议室</span>
 </div>
 <div class="button-newlist" style="margin-top: 20px;"id="1" >
         <span>第二会议室</span>
 </div>
                        
.button-newlist {
            border-radius: 5px;
            background: #1E9FFF;
            box-shadow: 10px 10px 20px #d1d1d1, -10px -10px 20px #ffffff;
            height: 65px;
            /*margin-top: 20px;*/
            text-align: center;
        }

        .button-newlist-this {
            border-radius: 5px;
            background: #1E9FFF;
            box-shadow: inset 15px 15px 30px #1982d1, inset -15px -15px 30px #23bcff;
            height: 65px;
            /*margin-top: 20px;*/
            text-align: center;
        }

        .button-newlist span {
            color: white;
            font-size: 24px;
            display: inline-block;
            margin-top: 16px;
        }

        .button-newlist-this span {
            color: white;
            font-size: 24px;
            display: inline-block;
            margin-top: 16px;
        }
<script>
        $(".button-newlist").click(function () {
            $(".button-newlist").removeClass("button-newlist-this");
            $(this).toggleClass("button-newlist-this");
            layer.alert(this.id);
        })
    </script>

动态切换

posted @ 2020-08-17 13:02  Meanxiao  阅读(180)  评论(0)    收藏  举报