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/> 每月套餐内拨打100分钟，超出部分2毛/分钟
59 </div>
60 <div id="content2" style="display: none">
61 30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟
62 </div>
63 <div id="content3" style="display: none">
64 50元包月详情：<br/> 每月无限量随心打
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>
