1 <!DOCTYPE html> 2 <html> 3 <head lang="en"> 4 <meta charset="UTF-8"> 5 <title></title> 6 <style> 7 div{margin:0;padding:0;width:184px;height:200px;border:1px solid #ccc;display:none;} 8 .tab{margin:0;padding:0;list-style:none;width:200px;overflow:hidden;} 9 .tab li{float:left;width:60px;height:30px;background:#ccc;color:#fff;border:1px solid red; text-align:center;line-height:30px;cursor:pointer; } 10 .on{display:block;} 11 .tab li.cur{background:blue;} 12 </style> 13 14 </head> 15 <body> 16 <ul class="tab"> 17 <li>最新</li> 18 <li class="cur">热门</li> 19 <li>新闻</li> 20 </ul> 21 <div>11</div> 22 <div class="on">22</div> 23 <div>33</div> 24 <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.js"></script> 25 <script> 26 //tab选项卡 27 $(document).ready(function(){ 28 $(".tab li").click(function(){ 29 $(".tab li").eq($(this).index()).addClass("cur").siblings().removeClass('cur'); 30 $("div").hide(200).eq($(this).index()).show(200); 31 //另一种方法: $("div").eq($(".tab li").index(this)).addClass("on").siblings().removeClass('on'); 33 }); 34 }); 35 </script> 36 </body> 37 </html>