注:需要引用jquery,我用的是jquery-1.12.2.min.js.其他的没有测试,一般不会出问题
先看效果图--------------------
HTML.
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 <link rel="stylesheet" type="text/css" href="css/css.css"/> 7 <script type="text/javascript" src="js/jquery-1.12.2.min.js"></script> 8 <script type="text/javascript" src="js/js.js" ></script> 9 10 11 </head> 12 <body> 13 <div id="button"> 14 <!--tem仅用于布局通道按钮--> 15 <div class="tem"></div> 16 <div id="l_1" class="button_channel new" onclick="">1</div> 17 <div class="tem"></div> 18 <div id="l_2" class="button_channel" onclick="" >2</div> 19 <div class="tem"></div> 20 <div id="l_3" class="button_channel" onclick="">3</div> 21 <div class="tem"></div> 22 <div id="l_4" class="button_channel" onclick="">4</div> 23 <div class="tem"></div> 24 <div id="l_5" class="button_channel" onclick="">5</div> 25 <div class="tem"></div> 26 <div id="l_6" class="button_channel" onclick="">6</div> 27 <div class="tem"></div> 28 <div id="l_7" class="button_channel" onclick="">7</div> 29 <div class="tem"></div> 30 </div> 31 </body> 32 </html>
js.js:
1 //对当前点击对象(通道号按钮)更换css样式 2 $(document).ready(function(){ 3 $('#button .button_channel').click(function(){ 4 $(this).siblings().removeClass('new'); 5 $(this).addClass('new'); 6 }) 7 });
css.css:
1 html,body{ 2 width: 100%; 3 height: 100%; 4 padding: 0; 5 margin: 0; 6 text-align:center; 7 overflow:scroll; 8 overflow-x:hidden; 9 overflow-y:hidden; 10 overflow:-Scroll;overflow-y:hidden; 11 } 12 13 14 /*7个按钮*/ 15 .button_channel{ 16 width: 50%; 17 height: 10%; 18 /*内*/ 19 margin-left: 20%; 20 border:1px solid rgba(39,20,115,1.00); 21 background: #304459; 22 } 23 /*视频按钮悬停*/ 24 .button_channel:hover{ 25 cursor:pointer; 26 background: #17a8ee; 27 } 28 /*通道按钮div的间隔*/ 29 .tem{ 30 width:50%; 31 height:2.8%; 32 } 33 34 /*addClass通道按钮*/ 35 .new{ 36 background: #17afee; 37 38 } 39 40 /*按钮外层div*/ 41 #button{ 42 /*float: right;*/ 43 /*border: 0px solid red ;*/ 44 width: 10%; 45 height: 100%; 46 margin-top:3.5% ; 47 padding-top:0.2% ; 48 background: transparent; 49 font-size: 40px; 50 51 }