html代码：

1 
     
       2     
      
        3         
       
第一项
 4         
       
第二项
 5         
       
第三项
 6     
      
 7     
      
       11111
      
 8     
      
       22222
      
 9     
      
       33333
      
10 
     

css代码：

1 ul.tab li{
   width: 100px;height: 40px;line-height: 40px;border: 1px solid #dbdbdb;text-align: center;}2 ul.tab li.active{
   border: 1px solid #45b035;}3 .tabContent div{
   width:306px;height: 300px;line-height:300px;text-align:center;color:#ff0;background: #dbdbdb;display: none;}

js代码：

1 function tabList(Tab,index){2     $(Tab).find("div").hide();3     $(Tab).find("li").removeClass("active");                             $(Tab).find("div").eq(index).show().siblings("div").hide();4     $(Tab).find("li").eq(index).addClass("active").siblings().removeClass("active");5 }

调用：

  $(".tab li").on("click",function(){ tabList(".tabContent",$(this).index());})