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 相关文章推荐
BOM与DOM的区别分析
Oct 26 Javascript
基于jquery的跟随屏幕滚动代码
Jul 24 Javascript
浅谈javascript原型链与继承
Jul 13 Javascript
JavaScript中return用法示例
Nov 29 Javascript
微信小程序 scroll-view组件实现列表页实例代码
Dec 14 Javascript
JavaScript实现审核流程状态的动态显示进度条
Mar 15 Javascript
div中文字内容溢出常见的解决方法
Mar 16 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
js数组实现权重概率分配
Sep 12 Javascript
微信小程序项目实践之主页tab选项实现
Jul 18 Javascript
vue升级之路之vue-router的使用教程
Aug 14 Javascript
Vue点击切换颜色的方法
Sep 13 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 小心urldecode引发的SQL注入漏洞
2011/10/27 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
Zend Framework教程之动作的基类Zend_Controller_Action详解
2016/03/07 PHP
PHP实现的分解质因数操作示例
2018/08/01 PHP
关于laravel 日志写入失败问题汇总
2019/10/17 PHP
让广告代码不再影响你的网页加载速度
2006/07/07 Javascript
Jquery截取中文字符串的实现代码
2010/12/22 Javascript
使用js正则控制input标签只允许输入的值
2013/07/29 Javascript
JS动态调用方法名示例介绍
2013/12/18 Javascript
JSON格式的时间/Date(2367828670431)/格式转为正常的年-月-日 格式的代码
2016/07/27 Javascript
修改Jquery Dialog 位置的实现方法
2016/08/26 Javascript
AngularJs  Using $location详解及示例代码
2016/09/02 Javascript
详解Vue学习笔记入门篇之组件的内容分发(slot)
2017/07/17 Javascript
使用npm安装最新版本nodejs
2018/01/18 NodeJs
vue基于mint-ui实现城市选择三级联动
2020/06/30 Javascript
原生JS实现的简单轮播图功能【适合新手】
2018/08/17 Javascript
highcharts.js数据绑定方式代码实例
2019/11/13 Javascript
Python中使用语句导入模块或包的机制研究
2015/03/30 Python
Python面向对象程序设计之继承与多继承用法分析
2018/07/13 Python
Python检查和同步本地时间(北京时间)的实现方法
2018/12/03 Python
docker django无法访问redis容器的解决方法
2019/08/21 Python
python opencv将表格图片按照表格框线分割和识别
2019/10/30 Python
Python如何将字符串转换为日期
2020/07/31 Python
Etam艾格英国官网:法国著名女装品牌
2019/04/15 全球购物
荷兰在线啤酒店:Beerwulf
2019/08/26 全球购物
MATCHESFASHION澳大利亚/亚太地区:英国时尚奢侈品电商
2020/01/14 全球购物
为什么要有struct关键字
2012/05/08 面试题
教育技术职业规划范文
2014/03/04 职场文书
领导班子群众路线与四风问题对照检查材料思想汇报
2014/10/11 职场文书
博士导师推荐信
2015/03/25 职场文书
离婚答辩状范文
2015/05/22 职场文书
同学会感言
2015/07/30 职场文书
创业计划书之网吧
2019/10/10 职场文书
JavaScript实现简单图片切换
2021/04/29 Javascript
mysql下的max_allowed_packet参数设置详解
2022/02/12 MySQL
一条 SQL 语句执行过程
2022/03/17 MySQL