HTML code
<Divclass= "Box_top"> <Divclass= "Dt_left"> <ul> <Li><a><Buttontype= "button"class= "Btns"name="">Unit 1</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 2</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 3</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 4</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 5</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 6</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 7</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 8</Button></a></Li> <Li><a><Buttontype= "button"class= "Btns btns-default"name="">Unit 9</Button></a></Li> </ul> </Div></Div>
CSS Code
<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;}/*Button*/. Btns{-webkit-transition:background-color. 1s linear;-moz-transition:background-color. 1s linear;-o-transition:background-color. 1s linear;transition:background-color. 1s linear}/*Default--gray is usually used to cancel*/. 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;}/*Success*/. 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< /c3>{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 Code
<script src= "jquery.min.3.1.1.js" ></script><script> { $ ('. 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 Implementation Click button to change background color