jquery实现点击按钮变换背景颜色

Posted 2020-10-31 静幻已空梦仍在

html代码

<div class="box_top">
        <div class="dt_left">
            <ul>
                <li><a><button type="button" class="btns" name="">1单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">2单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">3单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">4单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">5单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">6单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">7单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">8单元</button></a></li>
                <li><a><button type="button" class="btns btns-default" name="">9单元</button></a></li>
          </ul>
      </div>
</div>

css代码

<style type="text/css">
 .dt_left{width: 90%;height: 35px;float: left;}
 .dt_left ul li {margin: 0px 1px;display: block;float: left;}
 .dt_left ul li button {
    width: 55px;
    height: 27px;
    background-color: #FFFEFB;
    border: 1px solid #ccc;
    text-align: center;
}
/*按钮*/
.btns{
    -webkit-transition:background-color .1s linear;
    -moz-transition:background-color .1s linear;
    -o-transition:background-color .1s linear;
    transition:background-color .1s linear
}
/*默认——灰色 通常用于取消*/
 .dt_left ul li .btns-default{background-color:#FFFEFB}
 .dt_left ul li .btns-default:hover,
 .dt_left ul li .btns-default:focus,
 .dt_left ul li .btns-default:active,
 .dt_left ul li .btns-default.active{
    background-color:#FFFEFB;
    border: 1px solid #ccc;
}
/*成功*/
 .dt_left ul li .btns-success{
    background-color:#FFFEFB; 
    border: 1px solid #ccc;
}
 .dt_left ul li .btns-success:hover,
 .dt_left ul li .btns-success:focus,
 .dt_left ul li .btns-success:active,
.sactive{
    color:#fff;
    background-color:#05A8FE !important;
    border: 1px solid #05A8FE;
}
.box_top .dt_right{width: 10%;float: left;}
.box_top .dt_right img{width: 20px;height: 20px;margin:7px 0 0 3px;}
.house_box .box_content{height: auto;}
.dt_left a button:visited {background-color: red;}
    </style>

jquery代码

<script src="jquery.min.3.1.1.js"></script>
<script>
   $(function() {
       $(‘.dt_left li:eq(0)>a>button‘).addClass(‘sactive‘);
           $(‘button‘).click(function(){
                $(‘.dt_left li:eq(0)>a>button‘).removeClass(‘sactive‘);
                 $(this).addClass("btns-success").siblings("button").removeClass("btns-success").addClass("btns-default");     
           });    
    }); 
</script>