第十三节 jQuery滑动选项卡

 1 DOCTYPE html>
 2 html lang="en">
 3 head>
 4     meta charset="UTF-8">
 5     title>Documenttitle>
 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>按钮1div>
66             div>按钮2div>
67             div>按钮3div>
68         div>
69     div>
70 body>
71 html>