<!DOCTYPEhtml><html><head><metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/><title>tab滑动特效</title><style>html,body,div,span,applet,object,iframe,h2,h3,h4,h5,h6,h7,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;}body{line-height:1;}ol,ul{list-style:none;}blockquote,q{quotes:none;}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}a{text-decoration:none;}.clearfix{*zoom:1;}.clearfix:before,.clearfix:after{display:table;line-height:0;content:"";}.clearfix:after{clear:both;}#container{width:500px;margin:10pxauto;}.tab-menu{width:500px;}.tab-menuul{list-style:none;}.tab-menuli{float:left;width:100px;height:30px;border:1pxsolid#3174b1;text-align:center;background:#5090c0;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:1pxsolid#5090c0;}.tab-menuli.selected{float:left;width:100px;height:30px;border:1pxsolid#c8cdd0;text-align:center;background:#e6eaed;border-top-left-radius:5px;border-top-right-radius:5px;border-bottom:1pxsolid#e6eaed;}.tab-menuli.selecteda{color:#5090c0;line-height:30px;}.tab-menulia{color:#fff;line-height:30px;}.tab-content{width:499px;overflow:hidden;border:1pxsolid#c8cdd0;}.tab-content.tab-all{width:2000px;}.tab-alldiv{float:left;width:498px;height:300px;}.white-div{position:relative;top:-302px;left:1px;background:#fff;height:2px;width:406px;}</style></head><body><divid="container"><divclass="tab-menu"><ulclass="clearfix"><liclass="selected"><ahref="javascript:void(0);">tabs1</a></li><li><ahref="javascript:void(0);">tabs2</a></li><li><ahref="javascript:void(0);">tabs3</a></li><li><ahref="javascript:void(0);">tabs4</a></li></ul></div><divclass="tab-content"><divclass="tab-allclearfix"><div>tabs1</div><div>tabs2</div><div>tabs3</div><div>tabs4</div></div></div><divclass="white-div"></div></div><scriptsrc="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js"language="javascript"type="text/javascript"></script><script>$(function(){var$tabmenu=$(".tab-menuli");var$tabcon=$(".tab-all");$tabmenu.on("click","a",function(){var_index=$(this).parent().index();$(this).parent().addClass("selected").siblings().removeClass("selected");vartwidth=$tabcon.find("div").eq(_index).width();$tabcon.animate({'margin-left':-twidth*_index+'px'});});});</script></body></html>


附件：http://down.51cto.com/data/2366002