找回密码
 注册
首页 › ≡≡网络技术≡≡ › WEB前端 ›用jquery实现网页标签(tab)简单滑动切换效果 ...
返回列表 发新帖

js 用jquery实现网页标签(tab)简单滑动切换效果

灰儿 2012-2-6 00:44:57
代码如下：
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>用jquery实现网页标签(tab)切换效果</title>
  6. <script type="text/javascript" src="jquery.min.js"></script>
  7. <script type="text/javascript">
  8. function SwapTab(name,title,content,Sub,cur){
  9.   $(name+' '+title).mouseover(function(){
  10.    $(this).addClass(cur).siblings().removeClass(cur);
  11.    $(content+" > "+Sub).eq($(name+' '+title).index(this)).show().siblings().hide();
  12.   });
  13. }
  14. $(function(){
  15. new SwapTab(".SwapTab","span",".tab-content","ul","fb");//排行TAB
  16. })
  17. </script>
  18. <style type="text/css">
  19. .tab span{ color:#2064ae;cursor: hand;!important;cursor: pointer}
  20. .hidden{display:none;}.invisible{visibility:hidden;}
  21. </style>
  22. </head>
  23. <body>
  24.             <span class="SwapTab tab"><span class="fb">tab1</span> | <span>tab2</span> | <span>tab3</span></span>
  25.             <div class="tab-content">
  26.             <ul>
  27.    tab1内容
  28.             </ul>
  29.             <ul class="hidden">
  30.    tab2内容
  31.             </ul>
  32.             <ul class="hidden">
  33.    tab3内容
  34.             </ul>
  35.             </div>
  36. </body>
  37. </html>
复制代码
下载附件：
tab切换效果.rar (24.2 KB, 下载次数: 515)
回复

使用道具 举报

B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 注册
学习中心
站长自定义文字内容，利用碎片时间，随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源，帮商家快速完成产品设计、降低生产成本。
学习中心
站长自定义文字内容，利用碎片时间，随时随地获取优质内容。
Q设计语言 了解更多
Q Design 提供商家设计所需的指导与资源，帮商家快速完成产品设计、降低生产成本。
关注管理员之家(admin365.cn)，利用碎片时间，随时随地获取优质内容！
关于我们联系我们商务合作寻求报道投稿须知
意见反馈：lxtdj@163.com
稿件投诉：lxtdj@163.com
7×24小时：18805246622
商务合作：18805246622
内容合作QQ：82931570
客服QQ：82931570

关注我们

关注泗洪热线官方微博
微博账号lxtdj@163.com

关注泗洪热线微信公众号
关注泗洪热线，关注泗洪生活
商务合作、媒体邀约
QQ: 82931570
Copyright © 2021 大湖网络 Powered by 管理员之家 - 苏ICP备2023053177号-2
微信扫一扫