jquery实现点击按钮变换背景颜色
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>