第九节 使用index和三个点击事件实现选项卡 

 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         }
11         .current{
12             background-color: gold;
13         }
14         .con div{
15             width: 200px;
16             height: 200px;
17             text-align: center;
18             margin: 50px auto 0;
19             line-height: 200px;
20             background-color: gold;
21             display: none;
22         }
23         .con .active{
24             display: block;
25         }
26     </style>
27     <script type="text/javascript" src="../jquery-1.12.4.min.js"></script>
28     <script type="text/javascript">
29         $(function(){
30             var $btns = $('.btns input');
31             var $div = $('.con div');
32             // alert($div.length);
33             // alert($div.eq(0));
34             $btns.eq(0).click(function(){
35                 var iNum01 = $btns.filter('.current').index();
36 
37                 $btns.eq(iNum01).removeClass('current');
38                 $btns.eq(0).addClass('current');
39 
40                 $div.eq(iNum01).removeClass('active');
41                 $div.eq(0).addClass('active');
42 
43             });
44             $btns.eq(1).click(function(){
45                 var iNum01 = $btns.filter('.current').index();
46 
47                 $btns.eq(iNum01).removeClass('current');
48                 $btns.eq(1).addClass('current');
49 
50                 $div.eq(iNum01).removeClass('active');
51                 $div.eq(1).addClass('active');
52                 
53             });
54             $btns.eq(2).click(function(){
55                 var iNum01 = $btns.filter('.current').index();
56 
57                 $btns.eq(iNum01).removeClass('current');
58                 $btns.eq(2).addClass('current');
59 
60                 $div.eq(iNum01).removeClass('active');
61                 $div.eq(2).addClass('active');
62             });
63 
64         });
65     </script>
66 </head>
67 <body>
68     <div class="btns">
69         <input type="button" name="" value="01" class="current">
70         <input type="button" name="" value="02">
71         <input type="button" name="" value="03">
72     </div>
73 
74     <div class="con">
75         <div class="active">按钮1</div>
76         <div>按钮2</div>
77         <div>按钮3</div>
78     </div>
79 </body>
80 </html>

 

posted @ 2020-03-14 17:33  kog_maw  阅读(169)  评论(0)    收藏  举报