js動態改變樣式,切換樣式


 注:需要引用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 }

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM