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>