js基于面向对象实现网页TAB选项卡菜单效果代码


Posted in Javascript onSeptember 09, 2015

本文实例讲述了js基于面向对象实现网页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>选项卡</title>
<style type="text/css">
body, h2, p {
 margin:0px;
 padding:0px;
}
ul, li {
 margin:0px;
 padding:0px;
 float:left;
 list-style-type:none;
}
body {
 font-size:12px;
}
.box {
 width:722px;
 height:99px;
 margin:10px auto;
 border:1px solid #dedede;
}
.list {
 width:711px;
 height:22px;
 float:left;
 padding:4px 0 0 9px;
 border-top:1px solid #fff;
 border-left:1px solid #fff;
 border-right:1px solid #fff;
 background:url(images/tabbg.jpg) repeat-x;
}
.list li {
 width:74px;
 height:22px;
 float:left;
 cursor:pointer;
 color:#656565;
 line-height:22px;
 text-align:center;
}
.list li.hove {
 width:72px;
 height:20px;
 color:#fc6703;
 line-height:20px;
 border-top:1px solid #dedede;
 border-left:1px solid #dedede;
 border-right:1px solid #dedede;
 border-bottom:1px solid #fff;
 background:#fff;
}
.content {
 width:722px;
 height:72px;
 float:left;
 display:none;
}
</style>
<script type="text/javascript">
function $(id){
 return typeof id === "string" ? document.getElementById(id) : id;
}
function $$(oParent, elem){
 return (oParent || document).getElementsByTagName(elem);
}
function $$$(oParent, sClass){
 var aElem = $$(oParent, '*');
 var aClass = [];
 var i = 0;
 for(i=0;i<aElem.length;i++)if(aElem[i].className == sClass)aClass.push(aElem[i]);
 return aClass;
}
function addEvent(oElm, strEvent, fuc) {
 window.addEventListener ? oElm.addEventListener(strEvent, fuc, false) : oElm.attachEvent('on' + strEvent, fuc);
};
function Tab(){
 this.initialize.apply(this, arguments);
}
Object.extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
 return destination;
};
Tab.prototype = {
 initialize : function(obj, dis, content, onEnd, eq){
  this.obj = $(obj);
  this.oList = $$$(this.obj, 'list')[0];
  this.aCont = $$$(this.obj, content);
  this.oUl = $$(this.oList, 'ul')[0];
  this.aLi = this.oUl.children;
  this.timer = null;
  eq ? (this.aLi.length < eq ? eq = 0 : eq) : eq = 0;
  this.oEve(onEnd);
  this.onEnd.method == 'mouseover' ? this.method = "mouseover" : this.method = "click";
  this.onEnd.autoplay == 'stop' ? this.autoplay = "stop" : this.autoplay = "play";
  this.aCont[eq].style.display = 'block';
  this.aLi[eq].className = 'hove';
  this.display(dis);
  this.autoPlayTab(eq, dis);
 },
 oEve: function(onEnd){
 this.onEnd = {
  method: 'mouseover',
   autoplay: 'stop',
 };
 Object.extend(this.onEnd, onEnd || {});
 },
 display : function(dis){
  var _this = this;
  var i = iNow = 0;
  for(i=0;i<this.aLi.length;i++){
   (function(){
    var j = i;
    addEvent(_this.aLi[j], _this.method,
    function() {
     _this.fnClick(j,dis);
     _this.autoPlayTab(j, dis);
    })
    })()
  }
 },
 autoPlayTab : function(iNow, dis){
  if(this.autoplay == 'play'){
   var _this = this;
   this.iNow = iNow;
   this.obj.onmouseover = function(){
    clearInterval(_this.timer);
   };
   this.obj.onmouseout = function(){
    clearInterval(_this.timer);
    _this.timer = setInterval(playTab,5000);
   };
   clearInterval(_this.timer);
   _this.timer = setInterval(playTab,5000);
   function playTab(){
    if(_this.iNow == _this.aLi.length)_this.iNow = 0;
    _this.fnClick(_this.iNow, dis)
    _this.iNow++
   }
  }
 },
 fnClick : function(oBtn, dis){
  var i = 0;
  for(i=0;i<this.aLi.length;i++)this.aLi[i].className = '',this.aCont[i].style.display = 'none';
  this.aLi[oBtn].className = dis;
  this.aCont[oBtn].style.display = 'block';
 }
};
window.onload = function(){
 new Tab("box", 'hove', 'content', {
 method : 'mouseover',
  autoplay : 'play'
 },0);
 new Tab("box1", 'hove', 'content', {
 method : 'click',
 },0);
};
</script>
</head>
<body>
<div id="box" class="box">
 <div class="list">
  <ul>
  <li>团购导航</li>
  <li>商城导航</li>
  <li>淘宝导航</li>
 </ul>
 </div>
 <div class="content">111</div>
 <div class="content">222</div>
 <div class="content">333</div>
</div>
<div id="box1" class="box">
 <div class="list">
  <ul>
  <li>团购导航</li>
  <li>商城导航</li>
  <li>淘宝导航</li>
 </ul>
 </div>
 <div class="content">111</div>
 <div class="content">222</div>
 <div class="content">333</div>
</div>
</body>
</html>

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

Javascript 相关文章推荐
js的with语句使用方法
Sep 21 Javascript
JavaScript 面向对象编程(2) 定义类
May 18 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
JS实现仿QQ效果的三级竖向菜单
Sep 25 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
javascript实现数组去重的多种方法
Mar 14 Javascript
原生JS实现图片懒加载(lazyload)实例
Jun 13 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
ES6 系列之 WeakMap的使用示例
Aug 06 Javascript
Vue实现移动端页面切换效果【推荐】
Nov 13 Javascript
详解Vue.js在页面加载时执行某个方法
Nov 20 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
JS实现自动变换的菜单效果代码
Sep 09 #Javascript
jQuery实现点击小图片淡入淡出显示大图片特效
Sep 09 #Javascript
JS实现自动变化的导航菜单效果代码
Sep 09 #Javascript
使用impress.js制作幻灯片
Sep 09 #Javascript
谈谈impress.js初步理解
Sep 09 #Javascript
javascript实现base64 md5 sha1 密码加密
Sep 09 #Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 #Javascript
You might like
php中用memcached实现页面防刷新功能
2014/08/19 PHP
LNMP部署laravel以及xhprof安装使用教程
2017/09/14 PHP
PHP空值检测函数与方法汇总
2017/11/19 PHP
TP5框架页面跳转样式操作示例
2020/04/05 PHP
javascript 哈希表(hashtable)的简单实现
2010/01/20 Javascript
匹配任意字符的正则表达式写法
2010/04/29 Javascript
js获取上传文件大小示例代码
2014/04/10 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
JavaScript实现音乐自动切换和轮播
2017/11/05 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
vue+高德地图写地图选址组件的方法
2019/05/18 Javascript
vue 自动化路由实现代码
2019/09/03 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
微信小程序实现上传多个文件 超过10个
2020/03/30 Javascript
原生js+css实现tab切换功能
2020/09/17 Javascript
跟老齐学Python之不要红头文件(1)
2014/09/28 Python
Python中scatter函数参数及用法详解
2017/11/08 Python
Python通过调用mysql存储过程实现更新数据功能示例
2018/04/03 Python
详解小白之KMP算法及python实现
2019/04/04 Python
在python中画正态分布图像的实例
2019/07/08 Python
django实现模板中的字符串文字和自动转义
2020/03/31 Python
matlab中二维插值函数interp2的使用详解
2020/04/22 Python
Python经纬度坐标转换为距离及角度的实现
2020/11/01 Python
Python实现中英文全文搜索的示例
2020/12/04 Python
LN-CC中国:高端男装和女装的奢侈时尚目的地
2019/09/14 全球购物
百度吧主申请感言
2014/01/12 职场文书
八荣八耻的活动方案
2014/08/16 职场文书
应届生求职自荐信范文
2015/03/04 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
2015年保管员工作总结
2015/04/30 职场文书
请客吃饭开场白
2015/06/01 职场文书
公司开业主持词
2015/07/02 职场文书
工作报告范文
2019/06/20 职场文书
MySQL一些常用高级SQL语句
2021/07/03 MySQL
AudioContext 实现音频可视化(web技术分享)
2022/02/24 Javascript