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 相关文章推荐
cookie在javascript中的使用技巧以及隐私在服务器端的设置
Dec 03 Javascript
javascript的原生方法获取数组中的最大(最小)值
Dec 19 Javascript
javascript:void(0)使用探讨
Aug 27 Javascript
基于JavaScript获取鼠标位置的各种方法
Dec 16 Javascript
基于jQuery实现动态搜索显示功能
May 05 Javascript
JS实现颜色动态淡化效果
Mar 06 Javascript
使用vue-cli创建项目的图文教程(新手入门篇)
May 02 Javascript
微信小程序form表单组件示例代码
Jul 15 Javascript
深入浅出vue图片路径的实现
Sep 04 Javascript
layer页面跳转,获取html子节点元素的值方法
Sep 27 Javascript
利用JS如何获取form表单数据
Dec 19 Javascript
JavaScript事件概念详解(区分静态注册和动态注册)
Feb 05 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
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
PHP 杂谈《重构-改善既有代码的设计》之三 重新组织数据
2012/04/09 PHP
2个自定义的PHP in_array 函数,解决大量数据判断in_array的效率问题
2014/04/08 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP中的session安全吗?
2016/01/22 PHP
php 实现一个字符串加密解密的函数实例代码
2016/11/01 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP创建文件及写入数据(覆盖写入,追加写入)的方法详解
2019/02/15 PHP
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
javascript使用avalon绑定实现checkbox全选
2015/05/06 Javascript
jquery移动点击的项目到列表最顶端的方法
2015/06/24 Javascript
jQuery实现的进度条效果
2015/07/15 Javascript
jquery实现模拟百分比进度条渐变效果代码
2015/10/29 Javascript
js实现商城星星评分的效果
2015/12/29 Javascript
Angularjs material 实现搜索框功能
2016/03/08 Javascript
Bootstrap中的表单验证插件bootstrapValidator使用方法整理(推荐)
2016/06/21 Javascript
详谈构造函数加括号与不加括号的区别
2017/10/26 Javascript
Vue 动态组件components和v-once指令的实现
2019/08/30 Javascript
Vue 样式切换及三元判断样式关联操作
2020/08/09 Javascript
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
python获取指定路径下所有指定后缀文件的方法
2015/05/26 Python
详解Python之unittest单元测试代码
2018/01/24 Python
python利用高阶函数实现剪枝函数
2018/03/20 Python
Python模块、包(Package)概念与用法分析
2019/05/31 Python
python set内置函数的具体使用
2019/07/02 Python
Python 2.6.6升级到Python2.7.15的详细步骤
2020/12/14 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
美国嘻哈文化生活方式品牌:GLD
2018/04/15 全球购物
英国Boots旗下太阳镜网站:Boots Designer Sunglasses
2018/07/07 全球购物
Abbacino官网:包、钱包和女士配饰
2019/04/15 全球购物
小学雷锋月活动总结
2014/07/03 职场文书
擅自离岗检讨书
2014/09/12 职场文书
领导干部群众路线对照检查材料
2014/11/05 职场文书
个人年终总结范文
2015/03/09 职场文书
Nginx域名转发https访问的实现
2021/03/31 Servers