基于框架实现仿百度首页选项卡切换效果

以下代码比较简单，所以没给大家附太多的注释，有问题欢迎给我留言，具体详情请看下文代码吧。

先给大家展示下效果图：

代码如下：

！DOCTYPE html html health eta http-equiv=' Content-TYPe ' Content=' text/html；charset=utf-8' /titlejQuery仿百度首页选项卡切换效果-何问起/title base target=' _ blank '/style type=' text/CSS ' body { background : URL(http://悬停树。com/肖特/jquery/71/images/65.jpg)无重复固定中心中心；}.气垫树页面。清除{clear:两者；}.悬停页面{ margin: 200px auto 0 auto宽度： 700像素；高度： 300px}。气垫树页面。向左，向右。气垫树页面。右{左侧浮动： }。气垫树页面nav-back { width : 60px；高度： 300像素背景技术： # 000;opa city 3360 . 3 filter : alpha(不透明度=30);}.气垫树页面导航{位置：相对；边距-top :-300 px；宽度： 60px文本对齐：中心；font-size : 14px字体系列： '微软雅黑；color: # fff}。气垫树页面nav div { height: 32px线高： 28px光标：指针指针；}.气垫树页面{ background: # 0094ea}。气垫树页面。右{宽度： 620像素重量： 300像素左边距left: 20px}。气垫树页面。内容返回{宽度： 620像素重量： 300像素背景# fffopacity:3}。气垫树页面。内容{位置：相对；宽度： 600像素；高度： 280像素；边距-top :-300 px；padding: 10px飞越：隐藏；}.气垫树页面。内容a { color:blue}。气垫树页面内容分区{宽度： 600像素高度： 280像素；边距-底部： 10px背景# fff }/style/head dydiv class=' hover tree page ' div class=' left ' div class=' nav-back '/div div class=' nav ' div class=' on '导航/divdiv新闻/divdiv世界杯/divdiv音乐/divdiv彩票/div/div/div class=' right ' div class=' content-back '/div div class=' content ' div 1a href=' http://悬停树。' com '首页/a a href=' http://悬停树。com/肖特/特效/a a href=' http://悬停树。com/h/bjaf/n 781 jmfy。' htm '原文/a/div 2/div 3 a href=' http://悬停树。com/肖特/jquery/70/color.htm '服装店风云/a自从接触编程以后，兴趣就一直有增无减div 4 a href=' http://悬停树。com/h/bjaf/ati6k 7yk。htm ' jquery全部版本下载/a时间就是金钱，效率就是生命div 5 a href=' http://悬停树。com/肖特/html 5/30/' img src=' http :http://悬停树。com/hvtimg/bjafjd/wmt3m xd 7。png ' alt='孙悟空//a/div/div/class=' clear '/div/div脚本类型=' text/JavaScript ' src=' http :http://down。气垫树。com/jquery/jquery-1。12 .3 .量滴js '/script脚本类型=' text/JavaScript ' $(').气垫树页面导航区').鼠标输入(function(){ var $ this=$(this)；var索引=$ this。index()；}).鼠标离开(function(){ var $ this=$(this)；var索引=$ this。index()；}).单击(function(){ var $ this=$(this)；var索引=$ this。index()；var l=-(指数* 290);$('.hove ' ' rtreepage .nav div ').移除CLaSS(' on ')；$('.气垫树页面导航区').eq(指数)。添加CLaSS(' on ')；$('.气垫树页面内容div:eq(0)').停止()。动画({ 'margin-top': l }，500)；});/脚本/正文/html以上内容是小编给大家介绍的基于框架实现仿百度首页选项卡切换效果，希望对大家有所帮助！