第十节 使用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.click(function(){
35                 // this 指的是原生的this，它表示当前的点击对象
36                 // siblings() 只选择除了被点击对象之外的同级元素
37                 $(this).addClass('current').siblings().removeClass('current');
38                 $div.eq($(this).index()).addClass('active').siblings().removeClass('active');
39             });
40 
41         });
42     </script>
43 </head>
44 <body>
45     <div class="btns">
46         <input type="button" name="" value="01" class="current">
47         <input type="button" name="" value="02">
48         <input type="button" name="" value="03">
49     </div>
50 
51     <div class="con">
52         <div class="active">按钮1</div>
53         <div>按钮2</div>
54         <div>按钮3</div>
55     </div>
56 </body>
57 </html>

 

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