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>jquery实现点击按钮变换背景颜色
原文地址：https://www.cnblogs.com/quietxin/p/8831136.html