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

首页

web前端

js教程

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

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 16, 2016 pm 03:39 PM

jstab菜单选项卡面向对象

本文实例讲述了js基于面向对象实现网页TAB选项卡菜单效果代码。分享给大家供大家参考。具体如下：

这是一款自动的网页TAB，基于面向对象的选项卡菜单，由于时间关系只做了简单的实现，界面没有美化，不多做介绍了。

先来看看运行效果截图：

在线演示地址如下：

http://demo.jb51.net/js/2015/js-mxdx-tab-cha-style-codes/

具体代码如下：

<!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" &#63; 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 &#63; 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 &#63; (this.aLi.length < eq &#63; eq = 0 : eq) : eq = 0;
  this.oEve(onEnd);
  this.onEnd.method == 'mouseover' &#63; this.method = "mouseover" : this.method = "click";
  this.onEnd.autoplay == 'stop' &#63; 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程序设计有所帮助。

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

JavaScript在行动中：现实世界中的示例和项目Apr 19, 2025 am 12:13 AM

JavaScript在现实世界中的应用包括前端和后端开发。1)通过构建TODO列表应用展示前端应用，涉及DOM操作和事件处理。2)通过Node.js和Express构建RESTfulAPI展示后端应用。

JavaScript和Web：核心功能和用例Apr 18, 2025 am 12:19 AM

JavaScript在Web开发中的主要用途包括客户端交互、表单验证和异步通信。1)通过DOM操作实现动态内容更新和用户交互；2)在用户提交数据前进行客户端验证，提高用户体验；3)通过AJAX技术实现与服务器的无刷新通信。

了解JavaScript引擎：实施详细信息Apr 17, 2025 am 12:05 AM

理解JavaScript引擎内部工作原理对开发者重要，因为它能帮助编写更高效的代码并理解性能瓶颈和优化策略。1)引擎的工作流程包括解析、编译和执行三个阶段；2)执行过程中，引擎会进行动态优化，如内联缓存和隐藏类；3)最佳实践包括避免全局变量、优化循环、使用const和let，以及避免过度使用闭包。

Python vs. JavaScript：学习曲线和易用性Apr 16, 2025 am 12:12 AM

Python更适合初学者，学习曲线平缓，语法简洁；JavaScript适合前端开发，学习曲线较陡，语法灵活。1.Python语法直观，适用于数据科学和后端开发。2.JavaScript灵活，广泛用于前端和服务器端编程。

Python vs. JavaScript：社区，图书馆和资源Apr 15, 2025 am 12:16 AM

Python和JavaScript在社区、库和资源方面的对比各有优劣。1)Python社区友好，适合初学者，但前端开发资源不如JavaScript丰富。2)Python在数据科学和机器学习库方面强大，JavaScript则在前端开发库和框架上更胜一筹。3)两者的学习资源都丰富，但Python适合从官方文档开始，JavaScript则以MDNWebDocs为佳。选择应基于项目需求和个人兴趣。

从C/C到JavaScript：所有工作方式Apr 14, 2025 am 12:05 AM

从C/C 转向JavaScript需要适应动态类型、垃圾回收和异步编程等特点。1）C/C 是静态类型语言，需手动管理内存，而JavaScript是动态类型，垃圾回收自动处理。2）C/C 需编译成机器码，JavaScript则为解释型语言。3）JavaScript引入闭包、原型链和Promise等概念，增强了灵活性和异步编程能力。

JavaScript引擎：比较实施Apr 13, 2025 am 12:05 AM

不同JavaScript引擎在解析和执行JavaScript代码时，效果会有所不同，因为每个引擎的实现原理和优化策略各有差异。1.词法分析：将源码转换为词法单元。2.语法分析：生成抽象语法树。3.优化和编译：通过JIT编译器生成机器码。4.执行：运行机器码。V8引擎通过即时编译和隐藏类优化，SpiderMonkey使用类型推断系统，导致在相同代码上的性能表现不同。