选项卡切换练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>02_多Tab点击切换</title>
 6 
 7     <style>
 8         * {
 9             margin: 0;
10             padding: 0;
11         }
12 
13         #tab li {
14             float: left;
15             list-style: none;
16             width: 80px;
17             height: 40px;
18             line-height: 40px;
19             cursor: pointer;
20             text-align: center;
21         }
22 
23         #container {
24             position: relative;
25         }
26 
27         #content1, #content2, #content3 {
28             width: 300px;
29             height: 100px;
30             padding: 30px;
31             position: absolute;
32             top: 40px;
33             left: 0;
34         }
35 
36         #tab1, #content1 {
37             background-color: #ffcc00;
38         }
39 
40         #tab2, #content2 {
41             background-color: #ff00cc;
42         }
43 
44         #tab3, #content3 {
45             background-color: #00ccff;
46         }
47     </style>
48 </head>
49 <body>
50 <h2>多Tab点击切换</h2>
51 <ul id="tab">
52     <li id="tab1" value="1">10元套餐</li>
53     <li id="tab2" value="2">30元套餐</li>
54     <li id="tab3" value="3">50元包月</li>
55 </ul>
56 <div id="container">
57     <div id="content1">
58         10元套餐详情：<br/>&nbsp;每月套餐内拨打100分钟，超出部分2毛/分钟
59     </div>
60     <div id="content2" style="display: none">
61         30元套餐详情：<br/>&nbsp;每月套餐内拨打300分钟，超出部分1.5毛/分钟
62     </div>
63     <div id="content3" style="display: none">
64         50元包月详情：<br/>&nbsp;每月无限量随心打
65     </div>
66 </div>
67 <script src="js/jquery-1.10.1.js"></script>
68 <script>
69     $(function () {
70 //       获取三个li
71       var $list = $('#tab li');
72 //      获取三个div
73       var $divs = $('#container div');
74 //     记录旧的索引
75       var oldIndex = 0;
76 
77 //      给li绑定单击事件
78         $list.click(function () {
79 //           当前点击的索引
80             var clickIndex = $(this).index();
81 //            判断两次点击是否为同一个
82             if(oldIndex == clickIndex){
83                 alert('请不要重复点击');
84               return;
85             }
86             alert('点击成功');
87 //           给当前点击索引对应的div显示   上一次索引对应的div隐藏
88             $divs[oldIndex].style.display = 'none';
89             $divs[clickIndex].style.display = 'block';
90 //          更新索引
91             oldIndex = clickIndex;
92         })
93     })
94 </script>
95 </body>
96 </html>
猜你喜欢
