JS基于面向对象实现的选项卡效果示例


Posted in Javascript onDecember 20, 2016

本文实例讲述了JS基于面向对象实现的选项卡效果。分享给大家供大家参考,具体如下:

中间过渡环节:把面向过程的程序,改写成面向对象的形式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
  var oDiv=document.getElementById('div1');
  var aBtn=oDiv.getElementsByTagName('input');
  var aDiv=oDiv.getElementsByTagName('div');
  var i=0;
  for(i=0;i<aBtn.length;i++)
  {
    aBtn[i].index=i;
    aBtn[i].onclick=function ()
    {
      for(i=0;i<aBtn.length;i++)
      {
        aBtn[i].className='';
        aDiv[i].style.display='none';
      }
      this.className='active';
      aDiv[this.index].style.display='block';
    };
  }
};
</script>
</head>
<body>
<div id="div1">
  <input class="active" type="button" value="教育" />
  <input type="button" value="财经" />
  <input type="button" value="aaa" />
  <div style="display:block;">1asdfasdfds</div>
  <div>2xzcvxzcv</div>
  <div>5332342345</div>
</div>
</body>
</html>

改写注意事项:

1.前提:所有代码必须包含在window.onload里面
2.去掉函数嵌套(window.onload里面嵌套的函数拎到window.onload外面去)
3.不能有函数嵌套,但可以有全局变量(比如onclick函数拎出去后,aBtn是window.onload函数里的私有变量,onclick函数不能用)

过程:

1.onload(初始化整个程序)→构造函数(初始化一个对象)
2.全局变量→属性
3.函数→方法

window.onload=function(){
  var oTab=new TabSwitch("div1");
}
function TabSwitch(id)
{
  var oDiv=document.getElementById(id);
  this.aBtn=oDiv.getElementsByTagName('input');
  this.aDiv=oDiv.getElementsByTagName('div');
  var i=0;
  var _this=this;     //this是new出来的对象,即oTab
  for(i=0;i<this.aBtn.length;i++)
  {
    this.aBtn[i].index=i;
    this.aBtn[i].onclick=function(){
      _this.tab(this);  //通过参数的形式,将被点击的按钮传到下面去
    };
  }
};
TabSwitch.prototype.tab=function(oBtn){
  for(i=0;i<this.aBtn.length;i++)
  {
    this.aBtn[i].className='';
    this.aDiv[i].style.display='none';
  }
  oBtn.className='active';  //要被点击的按钮改变,而不是new出来的对象,所以这里不用this
  this.aDiv[oBtn.index].style.display='block';
}

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
jQuery判断当前点击的是第几个li的代码
Sep 26 Javascript
javascript通过获取html标签属性class实现多选项卡的方法
Jul 27 Javascript
jQuery实现图片加载完成后改变图片大小的方法
Mar 29 Javascript
jQuery ajaxSubmit 实现ajax提交表单局部刷新
Jul 04 Javascript
vue.js实现表格合并示例代码
Nov 30 Javascript
微信小程序实现YDUI的ScrollNav组件
Feb 02 Javascript
微信小程序实现循环动画效果
Jul 16 Javascript
详解解决Vue相同路由参数不同不会刷新的问题
Oct 12 Javascript
Vue之Mixins(混入)的使用方法
Sep 24 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
解决Angular.Js与Django标签冲突的方案
Dec 20 #Javascript
AngularJS 在同一个界面启动多个ng-app应用模块详解
Dec 20 #Javascript
JS基于面向对象实现的拖拽功能示例
Dec 20 #Javascript
详解为Angular.js内置$http服务添加拦截器的方法
Dec 20 #Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 #Javascript
JS简单实现表格排序功能示例
Dec 20 #Javascript
深入了解JavaScript的逻辑运算符(与、或)
Dec 20 #Javascript
You might like
PHP下常用正则表达式整理
2010/10/26 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
PHP父类调用子类方法的代码例子
2014/04/09 PHP
Windows下编译PHP5.4和xdebug全记录
2015/04/03 PHP
PHP模板引擎Smarty之配置文件在模板变量中的使用方法示例
2016/04/11 PHP
通过php动态传数据到highcharts
2017/04/05 PHP
JavaScript的Cookies
2008/01/16 Javascript
JQuery浮动DIV提示信息并自动隐藏的代码
2010/08/29 Javascript
网页中可关闭的漂浮窗口实现可自行调节
2013/08/20 Javascript
SeaJS入门教程系列之完整示例(三)
2014/03/03 Javascript
js判断iframe内的网页是否滚动到底部触发事件
2014/03/18 Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
2015/07/29 Javascript
JS正则验证多个邮箱完整实例【邮箱用分号隔开】
2017/04/19 Javascript
浅谈Angular路由复用策略
2017/10/04 Javascript
JavaScript异步加载问题总结
2018/02/17 Javascript
简单的React SSR服务器渲染实现
2018/12/11 Javascript
[40:01]OG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python使用urllib模块开发的多线程豆瓣小站mp3下载器
2014/01/16 Python
python定时器使用示例分享
2014/02/16 Python
pycharm 使用心得(七)一些实用功能介绍
2014/06/06 Python
Python实现简单的获取图片爬虫功能示例
2017/07/12 Python
Python中作用域的深入讲解
2018/12/10 Python
Python字典循环添加一键多值的用法实例
2019/01/20 Python
python使用adbapi实现MySQL数据库的异步存储
2019/03/19 Python
Pandas实现dataframe和np.array的相互转换
2019/11/30 Python
如何在python中执行另一个py文件
2020/04/30 Python
澳大利亚吉他在线:Artist Guitars
2017/03/30 全球购物
世界闻名的衬衫制造商:Savile Row Company
2018/07/30 全球购物
2014离婚协议书范文两篇
2014/09/15 职场文书
2015年大学元旦晚会活动策划书
2014/12/09 职场文书
实习计划书范文
2015/01/16 职场文书
教师求职自荐信范文
2015/03/04 职场文书
导游词之晋城蟒河
2019/12/12 职场文书
浅谈Python中的函数(def)及参数传递操作
2021/05/25 Python
如何使用SQL Server语句创建表
2022/04/12 SQL Server