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 相关文章推荐
Node.js(安装,启动,测试)
Jun 09 Javascript
jquery实现拖动效果
Aug 10 Javascript
jQuery 特性操作详解及实例代码
Sep 29 Javascript
浅析BootStrap Treeview的简单使用
Oct 12 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
Feb 26 Javascript
Javascript迭代、递推、穷举、递归常用算法实例讲解
Feb 01 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
React中使用外部样式的3种方式(小结)
May 28 Javascript
JavaScript中的null和undefined用法解析
Sep 30 Javascript
JavaScript原型继承和原型链原理详解
Feb 04 Javascript
原生js实现的观察者和订阅者模式简单示例
Apr 18 Javascript
简单了解前端渐进式框架VUE
Jul 20 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变量可用字符
2014/05/28 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php使用date和strtotime函数输出指定日期的方法
2014/11/14 PHP
ThinkPHP 模板substr的截取字符串函数详解
2017/01/09 PHP
php 截取GBK文档某个位置开始的n个字符方法
2017/03/08 PHP
Yii2压缩PHP中模板代码的输出问题
2018/08/28 PHP
ThinkPHP框架整合微信支付之刷卡模式图文详解
2019/04/10 PHP
jquery $.ajax入门应用二
2008/11/19 Javascript
javascript 设置文本框中焦点的位置
2009/11/20 Javascript
Jquery Ajax学习实例3 向WebService发出请求,调用方法返回数据
2010/03/16 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
MooTools 页面滚动浮动层智能定位实现代码
2011/08/23 Javascript
Notify - 基于jquery的消息通知插件
2011/10/18 Javascript
JS模块与命名空间的介绍
2013/03/22 Javascript
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7
2014/06/16 Javascript
提高NodeJS中SSL服务的性能
2014/07/15 NodeJs
分享2个jQuery插件--jquery.fileupload与artdialog
2014/12/26 Javascript
在JavaScript中对HTML进行反转义详解
2016/05/18 Javascript
JS实现漂亮的时间选择框效果
2016/08/20 Javascript
js仿新浪微博消息发布功能
2017/02/17 Javascript
JavaScript关联数组用法分析【概念、定义、遍历】
2017/03/15 Javascript
微信小程序实现上传word、txt、Excel、PPT等文件功能
2019/05/23 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
python实现Windows电脑定时关机
2018/06/20 Python
Python编译为二进制so可执行文件实例
2019/12/23 Python
MCAKE蛋糕官方网站:一直都是巴黎的味道
2018/02/06 全球购物
碧欧泉法国官网:Biotherm法国
2019/10/23 全球购物
文职个人求职信范文
2013/09/23 职场文书
秋季运动会广播稿大全
2014/02/17 职场文书
管理学院毕业生自荐信范文
2014/03/10 职场文书
党员群众路线个人整改措施思想汇报
2014/10/12 职场文书
2015年119消防宣传日活动总结
2015/03/24 职场文书
《倍数和因数》教学反思
2016/02/23 职场文书
幼儿园大班教学反思
2016/03/02 职场文书
详解CSS不受控制的position fixed
2021/05/25 HTML / CSS
Win11安装受阻怎么办? Windows11安装问题与解决方案汇总
2021/11/21 数码科技