<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>tab</title> <style type="text/css"> .c-nav { height: 60px; text-align: center; border-bottom: 1px solid #f0f0f0; position: relative; } .c-nav ul { width: 375px; height: 60px; margin: 0 auto; zoom: 1; } .c-nav li { float: left; height: 60px; line-height: 78px; padding: 0 33px; font-size: 16px; position: relative; overflow: hidden; } .c-nav li a { display: block; color: #666; } .c-nav .c-line { width: 64px; height: 2px; position: absolute; top: 59px; left: 300.5px; background-color: #f60; overflow: hidden; } .content-wrap{min-height: 400px;border: 1px solid #eee;margin-top: 10px} .f-dn{display: none;} </style> </head> <body> <div class="c-nav"> <ul> <li><a href="javascript:void(0);">云购记录</a></li> <li><a href="javascript:void(0);">获得的商品</a></li> <li><a href="javascript:void(0);">晒单</a></li> </ul> <div class="c-line"></div> </div> <div class="content-wrap">1</div> <div class="content-wrap f-dn">2</div> <div class="content-wrap f-dn">3</div> </body> <script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var _line = $(".c-nav .c-line"); var _initLeft = $('.c-nav li').eq(0).position().left + 33; _line.css('left',_initLeft); $('.c-nav li').click(function() { var _dom = $(this); var _index = _dom.index(); var _left = _dom.position().left + 33; var _width = _dom.width(); _line.animate({ left: _left, width: _width }); $('.content-wrap').eq(_index).removeClass('f-dn'); $('.content-wrap').eq(_index).siblings('.content-wrap').addClass('f-dn'); }); }); </script> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 会动的背景线 喜欢 (0)or分享 (0)
