首页
所有分类
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 相关文章推荐
IE8 下的Js错误HTML Parsing Error...
Aug 14 Javascript
用JS实现一个TreeMenu效果分享
Aug 28 Javascript
jQuery动画animate方法使用介绍
May 06 Javascript
js控制表单不能输入空格的小例子
Nov 20 Javascript
JSuggest自动匹配下拉框使用方法(示例代码)
Dec 27 Javascript
JavaScript实现大数的运算
Nov 24 Javascript
JavaScript中用于生成随机数的Math.random()方法
Jun 15 Javascript
手机端转盘抽奖代码分享
Sep 10 Javascript
Node.js批量给图片加水印的方法
Nov 15 Javascript
基于Vue的ajax公共方法(详解)
Jan 20 Javascript
详解vue路由篇(动态路由、路由嵌套)
Jan 27 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 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) 数据合并(1) 缓存机制(1) 逻辑函数(1) http_stub_status_module(1) zabbix(9) element-ui(1) BufferPool(1) 复合索引(1) location(2)
You might like
聊天室php&amp;mysql(一)
2006/10/09 PHP
PHP 程序授权验证开发思路
2009/07/09 PHP
php实现简单的语法高亮函数实例分析
2015/04/27 PHP
php使用socket调用http和smtp协议实例小结
2019/07/26 PHP
Thinkphp5.0 框架使用模型Model添加、更新、删除数据操作详解
2019/10/11 PHP
用jQuery技术实现Tab页界面之二
2009/09/21 Javascript
关于javascript function对象那些迷惑分析
2011/10/24 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
2013/05/31 Javascript
JavaScript对Cookie进行读写操作实例
2015/07/25 Javascript
js如何实现点击标签文字，文字在文本框出现
2015/08/05 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
微信小程序button组件使用详解
2018/01/31 Javascript
使用vue-route 的 beforeEach 实现导航守卫(路由跳转前验证登录)功能
2018/03/22 Javascript
Nodejs对postgresql基本操作的封装方法
2019/02/20 NodeJs
Vue 实现把表单form数据 转化成json格式的数据
2019/10/29 Javascript
微信小程序获取当前位置和城市名
2019/11/13 Javascript
Python实现删除文件但保留指定文件
2015/06/21 Python
Python注释详解
2016/06/01 Python
解决pandas展示数据输出时列名不能对齐的问题
2019/11/18 Python
Jupyter notebook 启动闪退问题的解决
2020/04/13 Python
python装饰器实现对异常代码出现进行自动监控的实现方法
2020/09/15 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
美国流行背包品牌：JanSport（杰斯伯）
2018/03/02 全球购物
Strawberrynet草莓网新加坡站：护肤、彩妆、香水及美发产品
2018/08/31 全球购物
Amara德国：家居饰品、设计师品牌和豪华礼品
2019/05/20 全球购物
英国豪华家具和家居用品购物网站：Teddy Beau
2020/10/12 全球购物
英国奢侈品在线精品店：Hervia
2020/09/03 全球购物
C语言笔试集
2012/07/24 面试题
How to spawning asynchronous work in J2EE
2016/08/29 面试题
大学生职业生涯规划书模板
2014/01/03 职场文书
大学生村官考核材料
2014/05/23 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
自荐信大全
2019/03/21 职场文书
[有人@你]你有一封绿色倡议书，请查收！
2019/07/18 职场文书
Python-OpenCV实现图像缺陷检测的实例
2021/06/11 Python
详细介绍python操作RabbitMq
2022/04/12 Python