首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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程序设计有所帮助。

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

- Author -

企鹅

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
[JS源码]超长文章自动分页（客户端版）
Jan 09 Javascript
让firefox支持IE的一些方法的javascript扩展函数代码
Jan 02 Javascript
JavaScript新窗口与子窗口传值详解
Feb 11 Javascript
node.js中的fs.chmodSync方法使用说明
Dec 18 Javascript
JavaScript实现定时隐藏与显示图片的方法
Aug 06 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
Vue组件库发布到npm详解
Feb 17 Javascript
Element-UI踩坑之Pagination组件的使用
Oct 29 Javascript
vue-cli3 项目优化之通过 node 自动生成组件模板 generate View、Component
Apr 30 Javascript
Vue2.X和Vue3.0数据响应原理变化的区别
Nov 07 Javascript
微信小程序轮播图swiper代码详解
Dec 01 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
lua(3) 匹配(1) geoserver(1) 索引树扫描(1) into outfile(1) 逻辑备份(1) 远程连接(2) 全表扫描(1) sql模式(1) 异步机制(1)
You might like
PHP安装问题
2006/10/09 PHP
LotusPhp笔记之:基于ObjectUtil组件的使用分析
2013/05/06 PHP
PHP批量生成图片缩略图的方法
2015/06/18 PHP
配置Nginx+PHP的正确思路与过程
2016/05/10 PHP
功能强大的PHP发邮件类
2016/08/29 PHP
深入浅析Yii admin的权限控制
2016/08/31 PHP
PHP内置加密函数详解
2016/11/20 PHP
PHP常用正则表达式精选（推荐）
2019/05/28 PHP
laravel框架使用极光推送消息操作示例
2020/02/15 PHP
在JavaScript中使用inline函数的问题
2007/03/08 Javascript
jquery实现弹出层遮罩效果的简单实例
2014/03/03 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
详解为Angular.js内置$http服务添加拦截器的方法
2016/12/20 Javascript
js实现增加数字显示的环形进度条效果
2017/02/05 Javascript
详解Angular4 路由设置相关
2017/08/26 Javascript
AngularJS实现的锚点楼层跳转功能示例
2018/01/02 Javascript
jQuery.validate.js表单验证插件的使用代码详解
2018/10/22 jQuery
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
详解VUE Element-UI多级菜单动态渲染的组件
2019/04/25 Javascript
vue路由守卫+登录态管理实例分析
2019/05/21 Javascript
Vue 中 a标签上href无法跳转的解决方式
2019/11/12 Javascript
js 动态校验开始结束时间的实现代码
2020/05/25 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
Python列出一个文件夹及其子目录的所有文件
2016/06/30 Python
Python利用字典将两个通讯录文本合并为一个文本实例
2018/01/16 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
pytorch程序异常后删除占用的显存操作
2020/01/13 Python
python 解决mysql where in 对列表(list,,array)问题
2020/06/06 Python
浅谈Python 命令行参数argparse写入图片路径操作
2020/07/12 Python
html5 canvas实现圆形时钟代码分享
2013/12/25 HTML / CSS
详解html2canvas截图不能截取圆角图片的解决方案
2018/01/30 HTML / CSS
视光学毕业生自荐书范文
2014/02/13 职场文书
校园环境卫生倡议书
2015/04/29 职场文书
在校生证明
2015/06/17 职场文书
2015年秋季运动会前导词
2015/07/20 职场文书
小学二年级语文教学反思
2016/03/03 职场文书