首页
所有分类
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 相关文章推荐
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
TinyMCE提交AjaxForm获取不到数据的解决方法
Mar 05 Javascript
jquery插件bxslider用法实例分析
Apr 16 Javascript
jquery easyui datagrid实现增加，修改，删除方法总结
May 25 Javascript
JS判断Android、iOS或浏览器的多种方法(四种方法)
Jun 29 Javascript
JavaScript你不知道的一些数组方法
Aug 18 Javascript
使用D3.js构建实时图形的示例代码
Aug 28 Javascript
微信小程序实现的动态设置导航栏标题功能示例
Jan 31 Javascript
node微信开发之获取access_token+自定义菜单
Mar 17 Javascript
微信端调取相册和摄像头功能，实现图片上传，并上传到服务器
May 16 Javascript
解决vue 表格table列求和的问题
Nov 06 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 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
android studio(3) IDEA(2) 移动开发(2) OpenLayer(1) 多维数组(1) Spring Boot(5) 安卓(1) 多线程(6) 嵌套(1) Sqlite(2)
You might like
PHP生成带有雪花背景的验证码
2006/10/09 PHP
解析PHP中$_FILES的使用以及注意事项
2013/07/05 PHP
php实现的双向队列类实例
2014/09/24 PHP
HTML中嵌入PHP的简单方法
2016/02/16 PHP
Smarty模板类内部原理实例分析
2019/07/03 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
如何让easyui gridview 宽度自适应窗口改变及fitColumns应用
2013/01/25 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
Angular2使用Angular-CLI快速搭建工程（二）
2017/05/21 Javascript
vue+swiper实现组件化开发的实例代码
2017/10/26 Javascript
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
JS中数组与对象的遍历方法实例小结
2018/08/14 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
Python Mysql数据库操作 Perl操作Mysql数据库
2009/01/12 Python
Python使用arrow库优雅地处理时间数据详解
2017/10/10 Python
Python网络编程之TCP与UDP协议套接字用法示例
2018/02/02 Python
Python零基础入门学习之输入与输出
2019/04/03 Python
html5表单及新增的改良元素详解
2016/06/07 HTML / CSS
使用PDF.JS插件在HTML中预览PDF文件的方法
2018/08/29 HTML / CSS
世界首屈一指的钓鱼用品商店：TackleDirect
2016/07/26 全球购物
日本著名的平价时尚女性购物网站：Fifth
2016/08/24 全球购物
Vans英国官方网站：美国南加州的原创极限运动潮牌
2017/01/20 全球购物
英国电视和家用电器购物网站：rlrdistribution.co.uk
2018/11/20 全球购物
Canal官网：巴西女性时尚品牌
2019/10/16 全球购物
世界上最伟大的马产品：Equiderma
2020/01/07 全球购物
Belstaff英国官方在线商店：Belstaff.co.uk
2021/02/09 全球购物
普通PHP程序员笔试题
2016/01/01 面试题
static全局变量与普通的全局变量有什么区别？static局部变量和普通局部变量有什么区别？static函数与普通函数有什么区别？
2015/02/22 面试题
思想品德课教学反思
2014/02/10 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
团支部书记竞选稿
2015/11/21 职场文书
golang import自定义包方式
2021/04/29 Golang
动漫APP软件排行榜前十名，半次元上榜，第一款由腾讯公司推出
2022/03/18 杂记