简单的选项卡,利用index()与eq()的对应
<div> <ul class="tab"> <li class="select">页面一</li> <li>页面二</li> <li>页面三</li> <li>页面四</li> </ul> <div class="connect"> <div class="contain" style="display: block">内容一</div> <div class="contain">内容二</div> <div class="contain">内容三</div> <div class="contain">内容四</div> </div> </div>
<script> $(".tab li").click(function(){ var num=$(this).index(); $(this).siblings().removeClass("select"); $(this).addClass("select"); $(".contain").eq(num).siblings().hide(); $(".contain").eq(num).show() }) </script>
<style> .tab{ width:280px; height:40px; margin:100px auto; padding: 0; list-style:none; } .select{ background: #e6e6e8; } .tab>li{ float:left; display:inline-block; width:68px; height:40px; text-align: center; line-height:40px; border:1px solid #333333; cursor:pointer; } .connect{ width:100px; margin: 0 auto; } .contain{ display:none; } </style>