*{padding:0px;margin:0px;font:12px normal "microsoft yahei";}  

     #tabs {width:290px;padding:5px;height:150px;margin:20px;}

     #tabs ul{list-style:none;display:block;height:30px;line-height:30px;border-bottom:2px saddlebrown solid;}

     #tabs ul li{background:#fff;cursor:pointer;float:left;list-style:none;height:20px;line-height:20px;margin:0px 3px;border:1px;solid #aaa;border-bottom:none;display:inline-block;width:60px;text-align:center;}

     #tabs ul li.on{border-top:2px solid saddlebrown;border-bottom:2px;solid #fff;}

     #tabs div{height:120px;line-height:25px;border:1px solid #336699;border-top:none;padding:5px;}

     .hide{display:none;}

样式

把 </ul> 下面的 </div> 放到最后 , 作为一个大的div ,   #tabs ul li .on --  #tabs ul li.on , 

var i=0;len=oLis.length; ---  var i=0,len=oLis.length;