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 相关文章推荐
checkbox设置复选框的只读效果不让用户勾选
Aug 12 Javascript
Easyui Treegrid改变默认图标的方法
Apr 29 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
Vue 父子组件、组件间通信
Mar 08 Javascript
jQuery插件开发发送短信倒计时功能代码
May 09 jQuery
探索webpack模块及webpack3新特性
Sep 18 Javascript
如何使用50行javaScript代码实现简单版的call,apply,bind
Aug 14 Javascript
解决Vue中 父子传值 数据丢失问题
Aug 27 Javascript
解决layui 表单元素radio不显示渲染的问题
Sep 04 Javascript
jQuery实现轮播图效果
Nov 26 jQuery
vue中的计算属性和侦听属性
Nov 06 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 UTF8 文件的签名问题
2009/10/30 PHP
php站内搜索并高亮显示关键字的实现代码
2011/12/29 PHP
php实现的mongodb操作类实例
2015/04/03 PHP
PHP面向对象程序设计(OOP)之方法重写(override)操作示例
2018/12/21 PHP
PHP实现cookie跨域session共享的方法分析
2019/08/23 PHP
php的命名空间与自动加载实现方法
2019/08/25 PHP
一段利用WSH获取登录时间的jscript代码
2008/05/11 Javascript
IE和Firefox的Javascript兼容性总结[推荐收藏]
2011/10/19 Javascript
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JavaScript中字符串拼接的基本方法
2015/07/07 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
九种原生js动画效果
2015/11/11 Javascript
把多个JavaScript函数绑定到onload事件处理函数上的方法
2016/09/04 Javascript
Angular的$http与$location
2016/12/26 Javascript
详解vue-Resource(与后端数据交互)
2017/01/16 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
2017/05/04 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
nuxt+axios解决前后端分离SSR的示例代码
2017/10/24 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
Vue Prop属性功能与用法实例详解
2019/02/23 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
利用python实现xml与数据库读取转换的方法
2017/06/17 Python
python数据封装json格式数据
2018/03/04 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
python os模块简单应用示例
2019/05/23 Python
基于python3实现倒叙字符串
2020/02/18 Python
Python通过Tesseract库实现文字识别
2020/03/05 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
详解Python爬虫爬取博客园问题列表所有的问题
2021/01/18 Python
美体小铺奥地利官方网站:The Body Shop奥地利
2019/04/11 全球购物
积极分子思想汇报
2014/01/04 职场文书
班队活动设计方案
2014/01/30 职场文书
建党伟业的观后感
2015/06/01 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书