铁雪资源网 Design By www.gsvan.com
以下代码比较简单,所以没给大家附太多的注释,有问题欢迎给我留言,具体详情请看下文代码吧。
先给大家展示下效果图:
代码如下:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery仿百度首页选项卡切换效果 - 何问起</title> <base target="_blank" /> <style type="text/css"> body { background: url(http://hovertree.com/texiao/jquery/71/images/65.jpg) no-repeat fixed center center; } .hovertreepage .clear { clear: both; } .hovertreepage { margin: 200px auto 0 auto; width: 700px; height: 300px; } .hovertreepage .left, .hovertreepage .right { float: left; } .hovertreepage .nav-back { width: 60px; height: 300px; background: #000; opacity: .3; filter: alpha(opacity=30); } .hovertreepage .nav { position: relative; margin-top: -300px; width: 60px; text-align: center; font-size: 14px; font-family: "微软雅黑"; color: #fff; } .hovertreepage .nav div { height: 32px; line-height: 28px; cursor:pointer; } .hovertreepage .nav div.on { background: #0094ea; } .hovertreepage .right { width: 620px; height: 300px; margin-left: 20px; } .hovertreepage .content-back { width: 620px; height: 300px; background: #fff; opacity: .3; } .hovertreepage .content { position: relative; width: 600px; height: 280px; margin-top: -300px; padding: 10px; overflow: hidden; } .hovertreepage .content a{color:blue;} .hovertreepage .content div { width: 600px; height: 280px; margin-bottom: 10px; background: #fff; } </style> </head> <body> <div class="hovertreepage"> <div class="left"> <div class="nav-back"></div> <div class="nav"> <div class="on">导航</div> <div>新闻</div> <div>世界杯</div> <div>音乐</div> <div>彩票</div> </div> </div> <div class="right"> <div class="content-back"></div> <div class="content"> <div>1 <a href="http://hovertree.com">首页</a> <a href="http://hovertree.com/texiao/">特效</a> <a href="http://hovertree.com/h/bjaf/n781jmfy.htm">原文</a> </div> <div>2 </div> <div>3 <a href="http://hovertree.com/texiao/jquery/70/color.htm">服装店风云</a> 自从接触编程以后,兴趣就一直有增无减。</div> <div>4 <a href="http://hovertree.com/h/bjaf/ati6k7yk.htm">jQuery全部版本下载</a> 时间就是金钱,效率就是生命。 </div> <div>5 <a href="http://hovertree.com/texiao/html5/30/"><img src="/UploadFiles/2021-04-02/wmt3mxd7.png">以上内容是小编给大家介绍的基于jQuery实现仿百度首页选项卡切换效果,希望对大家有所帮助!
标签:
jquery选项卡切换
铁雪资源网 Design By www.gsvan.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
铁雪资源网 Design By www.gsvan.com
暂无基于jQuery实现仿百度首页选项卡切换效果的评论...