jQuery从入门到熟练(10)

练习：多 Tab 点击切换

<style>*{margin:0;padding:0}#tab li{float:left;list-style:none;width:80px;height:40px;line-height:40px;cursor:pointer;text-align:center}#container{position:relative}#content1,#content2,#content3{width:300px;height:100px;padding:30px;position:absolute;top:40px;left:0}#tab1,#content1{background-color:#fc0}#tab2,#content2{background-color:#f0c}#tab3,#content3{background-color:#0cf}</style><h2>多Tab点击切换</h2><ul> <li value="1">10元套餐</li> <li value="2">30元套餐</li> <li value="3">50元包月</li></ul><div> <div> 10元套餐详情：
<br/> 每月套餐内拨打100分钟，超出部分2毛/分钟 </div> <div style="display: none"> 30元套餐详情：<br/> 每月套餐内拨打300分钟，超出部分1.5毛/分钟 </div> <div style="display: none"> 50元包月详情：<br/> 每月无限量随心打 </div></div><script type="text/javascript" src="jquery-1.10.1.js"></script><script type="text/javascript"> var $contents = $("#container>div") // 给3个li加监听 /*$("#tab>li").click(function () { // 隐式遍历 //alert("----") // 隐隐藏所有内容div $contents.css("display", "none") // 显示对应的内容div // 得到当前点击的li在兄弟中下标 var index = $(this).index() // 找到对应的内容div, 并显示 $contents[index].style.display = "block" // $($contents[index]).css("display", "block") })*/ // 改进——第二三个div默认none，不需要全部设置隐藏 var currIndex = 0 //当前显示的内容div的下标 $("#tab>li").click(function () { // 隐式遍历 //alert("----") // 隐藏当前已经显示的内容div $contents[currIndex].style.display = "none" // 显示对应的内容div // 得到当前点击的li在兄弟中下标 var index = $(this).index() // 找到对应的内容div, 并显示 $contents[index].style.display = "block" // 更新下标 currIndex = index })</script>