首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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

Posted in Javascript onAugust 31, 2015

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

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

运行效果截图如下：

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

在线演示地址如下：

具体代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>仿百度风云榜TAB切换</title>
<style>
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;}
</style>
<script>
var fgm = {
 $: function(id) {
 return typeof id === "object" ? id : document.getElementById(id);
 },
 $$: function(tagName, oParent) {
 return (oParent || document).getElementsByTagName(tagName);
 },
 $$$: function(className, element, tagName) {
 var i = 0, aClass = [], reClass = new RegExp("(^|\\s)" + className + "(\\s|$)"), aElement = fgm.$$(tagName || "*", element || document);
 for (i = 0; i < aElement.length; i++) reClass.test(aElement[i].className) && aClass.push(aElement[i]);
 return aClass;
 },
 index: function(element) {
 var aChildren = element.parentNode.children, i;
 for(i = 0; i < aChildren.length; i++) if(aChildren[i] === element) return i;
 return -1;
 },
 on: function(element, type, handler) {
 return element.addEventListener ? element.addEventListener(type, handler, !1) : element.attachEvent("on" + type, handler); 
 },
 bind: function(object, handler) {
 return function() {
 return handler.apply(object, arguments);
 }; 
 }
};
function Tab(id) {
 var that = this;
 this.obj = fgm.$(id);
 this.oTab = fgm.$$$("tab", this.obj)[0];
 this.aTab = fgm.$$("li", this.oTab);
 this.oSwitch = fgm.$$$("switchBtn", this.oTab)[0];
 this.oPrev = fgm.$$("a", this.oSwitch)[0];
 this.oNext = fgm.$$("a", this.oSwitch)[1];
 this.aItems = fgm.$$$("items", this.obj);
 this.iNow = 0; 
 fgm.on(this.oSwitch, "click", fgm.bind(this, this.fnClick));
 fgm.on(this.oTab, "mouseover", fgm.bind(this, this.fnMouseOver));
}
Tab.prototype = {
 fnMouseOver: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement;
 oTarget.tagName.toUpperCase() === "LI" && (this.iNow = fgm.index(oTarget));
 this.fnSwitch();
 },
 fnClick: function(ev) {
 var oEv = ev || event,
 oTarget = oEv.target || oEv.srcElement,
 i;
 switch(fgm.index(oTarget)) {
 case 0:
 if(oTarget.className == "prev") {
 this.aTab[this.iNow].style.display = "block";
 this.iNow--; 
 };
 break;
 case 1:
 if(oTarget.className == "next") { 
 for(i = 0; i < this.iNow; i++) this.aTab[i].style.display = "none";
 this.iNow++; 
 };
 break;
 };
 this.aTab[this.iNow].style.display = "block"; 
 this.fnSwitch(); 
 },
 fnSwitch: function() {
 for(var i = 0; i < this.aTab.length; i++) (this.aTab[i].className = "", this.aItems[i].style.display = "none"); 
 this.aTab[this.iNow].className = "current";
 this.aItems[this.iNow].style.display = "block";
 this.oPrev.className = this.iNow == 0 ? "prevNot" : "prev";
 this.oNext.className = this.iNow == this.aTab.length - 1 ? "nextNot" : "next";
 }
};
//应用
fgm.on(window, "load", function() {
 var aItem = fgm.$$$("item"),
 i = 0;
 for(; i < aItem.length; i++) new Tab(aItem[i]);
});
</script>
</head>
<body>
<div id="wrap">
 <div id="list">
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
 <div class="item">
  <div class="tab">
  <h5><a href="#">教育</a></h5>
  <ul>
   <li class="current">基础教育</li>
   <li>英语培训</li>
  </ul>
  <span class="switchBtn"><a href="javascript:;" class="prevNot">左</a><a href="javascript:;" class="next">右</a></span>
  </div>
  <ul class="items" style="display:block;">
  <li><a href="#">北京四中网校</a></li>
  <li><a href="#">学大教育</a></li>
  <li><a href="#">中国统一教育网</a></li>
  <li><a href="#">101远程教育网</a></li>
  <li><a href="#">巨人教育</a></li>
  <li><a href="#">黄冈中学网校</a></li>
  </ul>
  <ul class="items">
  <li><a href="#">新东方</a></li>
  <li><a href="#">英孚教育</a></li>
  <li><a href="#">环球雅思</a></li>
  <li><a href="#">韦博国际英语</a></li>
  <li><a href="#">华尔街英语</a></li>
  <li><a href="#">新航道</a></li>
  </ul>
  <div class="btn"><a href="#">完整榜单</a></div>
 </div>
  </div>
 <!--/list-->
</div>
</body>
</html>

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

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
jquery批量设置属性readonly和disabled的方法
Jan 24 Javascript
EasyUi combotree 实现动态加载树节点
Apr 01 Javascript
node.js中EJS 模板快速入门教程
May 08 Javascript
vue.js框架实现表单排序和分页效果
Aug 09 Javascript
vuejs+element-ui+laravel5.4上传文件的示例代码
Aug 12 Javascript
浅谈webpack下的AOP式无侵入注入
Nov 12 Javascript
对vue.js中this.$emit的深入理解
Feb 23 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
详解Axios统一错误处理与后置
Sep 26 Javascript
JS实现拖拽元素时与另一元素碰撞检测
Aug 27 Javascript
vue中实现弹出层动画效果的示例代码
Sep 25 Javascript
js实现仿爱微网两级导航菜单效果代码
Aug 31 #Javascript
jquery+CSS3模拟Path2.0动画菜单效果代码
Aug 31 #Javascript
jQuery实现简单的列表式导航菜单效果代码
Aug 31 #Javascript
jquery实现红色竖向多级向右展开的导航菜单效果
Aug 31 #Javascript
jquery+CSS3实现淘宝移动网页菜单效果
Aug 31 #Javascript
jQuery实现带有洗牌效果的动画分页实例
Aug 31 #Javascript
jquery选择器简述
Aug 31 #Javascript
底部导航(1) 计算器(5) Springboot-cli(1) format(1) JAVA(88) CompletableFuture(1) 异步回调(1) FutureTask(3) 对齐打印(1) ForkJoin(1)
You might like
利用php实现禁用IE和火狐的缓存问题
2012/12/03 PHP
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 2611816 bytes)
2014/11/08 PHP
在WordPress中使用wp-cron插件来设置定时任务
2015/12/10 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
JavaScript的parseInt 进制问题
2009/05/07 Javascript
一个简单的JavaScript 日期计算算法
2009/09/11 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
js日期相关函数dateAdd,dateDiff,dateFormat等介绍
2016/09/24 Javascript
原生js实现密码输入框值的显示隐藏
2017/07/17 Javascript
浅谈Node.js 子进程与应用场景
2018/01/24 Javascript
js中document.write和document.writeln的区别
2018/03/11 Javascript
vue文件树组件使用详解
2018/03/29 Javascript
vue项目开发中setTimeout等定时器的管理问题
2018/09/13 Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
2019/04/03 Javascript
vue移动端弹起蒙层滑动禁止底部滑动操作
2020/07/22 Javascript
python3.6连接MySQL和表的创建与删除实例代码
2017/12/28 Python
Python读取指定日期邮件的实例
2019/02/01 Python
Python实现大数据收集至excel的思路详解
2020/01/03 Python
解决python 找不到module的问题
2020/02/12 Python
Python反爬虫伪装浏览器进行爬虫
2020/02/28 Python
Tensorflow实现将标签变为one-hot形式
2020/05/22 Python
Python代码注释规范代码实例解析
2020/08/14 Python
html5 Canvas画图教程(3)—canvas出现1像素线条模糊不清的原因
2013/01/09 HTML / CSS
中国旅游网站：同程旅游
2016/09/11 全球购物
大学生毕业求职找工作的自我评价
2013/09/29 职场文书
中英双版中文教师求职信
2013/10/27 职场文书
高中军训感言500字
2014/02/24 职场文书
海飞丝的广告词
2014/03/20 职场文书
终止劳动合同协议书
2014/04/14 职场文书
主题党日活动总结
2014/07/08 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
汽车转让协议书
2015/01/29 职场文书
SQLServer2008提示评估期已过解决方案
2021/04/12 SQL Server
Redis安装启动及常见数据类型
2021/04/14 Redis
Python 类,对象,数据分类,函数参数传递详解
2021/09/25 Python
SpringDataJPA实体类关系映射配置方式
2021/12/06 Java/Android