实现点击动态添加样式
<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>
动态切换

浙公网安备 33010602011771号