<!DOCTYPE html> <html> <head> <meta http-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:10px auto;} .tab-menu{ width:500px;} .tab-menu ul{ list-style:none;} .tab-menu li{ float:left; width:100px; height:30px; border:1px solid #3174b1; text-align:center; background:#5090c0; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #5090c0;} .tab-menu li.selected{ float:left; width:100px; height:30px; border:1px solid #c8cdd0; text-align:center; background:#e6eaed; border-top-left-radius:5px; border-top-right-radius:5px; border-bottom:1px solid #e6eaed;} .tab-menu li.selected a{ color:#5090c0; line-height:30px;} .tab-menu li a{ color:#fff; line-height:30px;} .tab-content{ width:499px; overflow:hidden; border:1px solid #c8cdd0;} .tab-content .tab-all{ width:2000px; } .tab-all div{ float:left; width:498px; height:300px;} .white-div{ position:relative; top:-302px; left:1px; background:#fff; height:2px; width:406px;} </style> </head> <body> <div id="container"> <div class="tab-menu"> <ul class="clearfix"> <li class="selected"><a href="javascript:void(0);">tabs1</a></li> <li><a href="javascript:void(0);">tabs2</a></li> <li><a href="javascript:void(0);">tabs3</a></li> <li><a href="javascript:void(0);">tabs4</a></li> </ul> </div> <div class="tab-content"> <div class="tab-all clearfix"> <div>tabs1</div> <div>tabs2</div> <div>tabs3</div> <div>tabs4</div> </div> </div> <div class="white-div"></div> </div> <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.2.min.js" language="javascript" type="text/javascript"></script> <script> $(function(){ var $tabmenu=$(".tab-menu li"); var $tabcon=$(".tab-all"); $tabmenu.on("click","a",function(){ var _index=$(this).parent().index(); $(this).parent().addClass("selected").siblings().removeClass("selected"); var twidth=$tabcon.find("div").eq(_index).width(); $tabcon.animate({'margin-left':-twidth*_index + 'px'}); }); }); </script> </body> </html>
10年积累的网站设计、成都网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计后付款的网站建设流程,更有铅山免费网站建设让你可以放心的选择与我们合作。
分享文章:tab滑动特效
网站路径:https://www.cdcxhl.com/article2/poccic.html
成都网站建设公司_创新互联,为您提供网站改版、网站设计公司、服务器托管、企业建站、云服务器、外贸建站
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联