js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果

本文实例讲述了js实现仿百度风云榜可重复多次调用的TAB切换选项卡效果。分享给大家供大家参考。具体如下：

这是一款可在同一页面中多次调用的TAB选项卡代码，仿百度风云榜的TAB切换效果，用到了几张修饰图片，请顺着代码下载所需的图片，然后上传到你的网站中，修改代码内的路径就可以用了。

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-f-baidu-style-tab-cha-codes/

具体代码如下：

body,div,h5,ul,li{margin:0;padding:0;}
body{font:12px/1.5 Arial;}
li{list-style:none;}
a:link,a:visited{color:#333;text-decoration:none;}
a:hover{text-decoration:underline;}
#wrap{width:836px;border:3px solid #1972C0;border-width:3px 0;margin:10px auto;}
#list{overflow:hidden;zoom:1;margin-left:-10px;}
#wrap .item{display:inline;float:left;width:270px;padding-bottom:10px;border:1px solid #EBEBEB;margin:10px 0 10px 10px;}
#wrap .item .tab{position:relative;height:25px;border-bottom:1px solid #CCC;margin:8px;}
#wrap .item .tab h5{position:absolute;left:10px;font-size:14px;}
#wrap .item .tab .switchBtn{position:absolute;top:3px;right:0;}
#wrap .item .tab .switchBtn a{float:left;width:15px;height:15px;margin-left:5px;overflow:hidden;text-indent:-999px;background:url(images/icon_arr.gif) no-repeat;outline:none;}
#wrap .item .tab .switchBtn a.prev{background-position:0 -25px;}
#wrap .item .tab .switchBtn a.prevNot{background-position:0 0;cursor:default;}
#wrap .item .tab .switchBtn a.next{background-position:right -25px;}
#wrap .item .tab .switchBtn a.nextNot{background-position:right 0;cursor:default;}
#wrap .item .tab ul{position:absolute;top:-2px;left:50px;width:160px;height:28px;overflow:hidden;}
#wrap .item .tab ul li{float:left;cursor:pointer;line-height:26px;padding:0 8px;}
#wrap .item .tab ul li.current{cursor:text;color:#E45E2E;font-weight:700;border:1px solid #CCC;border-bottom-color:#FFF;}
#wrap .item .items{display:none;background:url(images/icon_num.gif) 15px 4px no-repeat;padding:0 15px;}
#wrap .item .items a{color:#3A64B0;}
#wrap .item .items li{height:24px;line-height:24px;padding-left:20px;border-bottom:1px solid #EBEBEB;}
#wrap .item .btn{height:22px;margin-top:10px;}
#wrap .item .btn a{float:right;width:74px;height:22px;overflow:hidden;margin-right:15px;text-indent:-9999px;background:url(images/icon_btn.gif) no-repeat;}
#wrap .item .btn a:hover{background-position:0 -22px;}
#copyright{color:#9A9A9A;text-align:center;}
#copyright a{color:#FFF;padding:2px 5px;border-radius:10px;background:#9A9A9A;}





 
 
  
  教育
  

   
基础教育
   
英语培训
  
  左右
  
  

  
北京四中网校
  
学大教育
  
中国统一教育网
  
101远程教育网
  
巨人教育
  
黄冈中学网校
  
  

  
新东方
  
英孚教育
  
环球雅思
  
韦博国际英语
  
华尔街英语
  
新航道
  
  完整榜单
 
 
  
  教育
  

   
基础教育
   
英语培训
  
  左右
  
  

  
北京四中网校
  
学大教育
  
中国统一教育网
  
101远程教育网
  
巨人教育
  
黄冈中学网校
  
  

  
新东方
  
英孚教育
  
环球雅思
  
韦博国际英语
  
华尔街英语
  
新航道
  
  完整榜单
 
 
  
  教育
  

   
基础教育
   
英语培训
  
  左右
  
  

  
北京四中网校
  
学大教育
  
中国统一教育网
  
101远程教育网
  
巨人教育
  
黄冈中学网校
  
  

  
新东方
  
英孚教育
  
环球雅思
  
韦博国际英语
  
华尔街英语
  
新航道
  
  完整榜单
 
  
 

希望本文所述对大家的javascript程序设计有所帮助。