第十三节 jQuery滑动选项卡 

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Document</title>
 6     <style type="text/css">
 7         .btns input{
 8             height: 40px;
 9             width: 100px;
10             outline: none;  /* 去掉边框的线 */
11             border: 0
12         }
13         .current{
14             background-color: gold;
15         }
16         .con{
17             height:200px;
18             width: 200px;
19             position: relative;
20             overflow: hidden;
21         }
22         .spilde{
23             width: 600px;
24             height: 200px;
25             position: absolute;
26             left: 0;
27             top: 0;
28         }
29         .spilde div{
30             width: 200px;
31             height: 200px;
32             text-align: center;
33             line-height: 200px;
34             background-color: gold;
35             float: left;
36         }
37         .con .active{
38             display: block;
39         }
40     </style>
41     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
42     <script type="text/javascript">
43         $(function(){
44             var $btns = $('.btns input');
45             var $div = $('.con .spilde');
46             $btns.click(function(){
47                 $(this).addClass('current').siblings().removeClass('current');
48                 // $div.stop().css({'left':-200*$(this).index()});  // 通过css样式改变
49                 $div.stop().animate({'left':-200*$(this).index()});  // 通过动画改变
50                 
51             });
52 
53         });
54     </script>
55 </head>
56 <body>
57     <div class="btns">
58         <input type="button" name="" value="01" class="current">
59         <input type="button" name="" value="02">
60         <input type="button" name="" value="03">
61     </div>
62 
63     <div class="con">
64         <div class="spilde">
65             <div>按钮1</div>
66             <div>按钮2</div>
67             <div>按钮3</div>
68         </div>
69     </div>
70 </body>
71 </html>

 

posted @ 2020-03-14 19:31  kog_maw  阅读(104)  评论(0)    收藏  举报