1 <style> 2 * { 3 margin: 0; 4 padding: 0; 5 } 6 7 li { 8 list-style-type: none; 9 } 10 11 .tab { 12 978px; 13 margin: 100px auto; 14 } 15 16 .tab_list { 17 height: 39px; 18 border: 1px solid #ccc; 19 background-color: #f1f1f1; 20 } 21 22 .tab_list li { 23 float: left; 24 height: 39px; 25 line-height: 39px; 26 padding: 0 20px; 27 text-align: center; 28 cursor: pointer; 29 } 30 31 .tab_list .current { 32 background-color: #c81623; 33 color: #fff; 34 } 35 36 .item_info { 37 padding: 20px 0 0 20px; 38 } 39 40 .item { 41 display: none; 42 } 43 </style> 44 <div class="tab"> 45 <div class="tab_list"> 46 <ul> 47 <li class="current">商品介绍</li> 48 <li>规格与包装</li> 49 <li>售后保障</li> 50 <li>商品评价（50000）</li> 51 <li>手机社区</li> 52 </ul> 53 </div> 54 <div class="tab_con"> 55 <div class="item" style="display: block;"> 56 商品介绍模块内容 57 </div> 58 <div class="item"> 59 规格与包装模块内容 60 </div> 61 <div class="item"> 62 售后保障模块内容 63 </div> 64 <div class="item"> 65 商品评价（50000）模块内容 66 </div> 67 <div class="item"> 68 手机社区模块内容 69 </div> 70 71 </div> 72 </div> 73 <script> 74 $(function () { 75 // 1.点击上部的li，当前li 添加current类，其余兄弟移除类 76 $(".tab_list li").click(function () { 77 // 链式编程操作 78 $(this).addClass("current").siblings().removeClass("current"); 79 // 2.点击的同时，得到当前li 的索引号 80 var index = $(this).index(); 81 console.log(index); 82 // 3.让下部里面相应索引号的item显示，其余的item隐藏 83 $(".tab_con .item").eq(index).show().siblings().hide(); 84 }); 85 }) 86 </script>
注意show和hide的使用