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 相关文章推荐
javascript下对于事件、事件流、事件触发的顺序随便说说
Jul 17 Javascript
js 判断脚本加载完毕的代码
Jul 13 Javascript
js修改table中Td的值(定义td的双击事件)
Jan 10 Javascript
js加载之使用DOM方法动态加载Javascript文件
Nov 08 Javascript
JS常用函数使用指南
Nov 23 Javascript
jQuery调取jSon数据并展示的方法
Jan 29 Javascript
JQuery调用绑定click事件的3种写法
Mar 28 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
Jquery on绑定的事件 触发多次实例代码
Dec 08 Javascript
JS正则表达式修饰符global(/g)用法分析
Dec 27 Javascript
React Native自定义控件底部抽屉菜单的示例
Feb 08 Javascript
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
解决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
成本8450万,票房仅2亿,口碑两极分化,又一部DC电影扑街了
2020/04/09 欧美动漫
PHP脚本的10个技巧(4)
2006/10/09 PHP
PHP 5.3新特性命名空间规则解析及高级功能
2010/03/11 PHP
PHP获取MAC地址的函数代码
2011/09/11 PHP
LaravelS通过Swoole加速Laravel/Lumen详解
2018/03/02 PHP
ThinkPHP中图片按比例切割的代码实例
2019/03/08 PHP
Yii框架函数简单用法分析
2019/09/09 PHP
基于jquery的仿百度的鼠标移入图片抖动效果
2010/09/17 Javascript
javascript 中String.match()与RegExp.exec()的区别说明
2013/01/10 Javascript
通过正则表达式实现表单验证是否为中文
2014/02/18 Javascript
javascript异步处理工作机制详解
2015/04/13 Javascript
喜大普奔!jQuery发布 3.0 最终版
2016/06/12 Javascript
js浏览器滚动条卷去的高度scrolltop(实例讲解)
2017/07/07 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
详解Vue中CSS样式穿透问题
2019/09/12 Javascript
Vue axios 将传递的json数据转为form data的例子
2019/10/29 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
Python实现计算两个时间之间相差天数的方法
2017/05/10 Python
Python守护线程用法实例
2017/06/23 Python
基于Python Numpy的数组array和矩阵matrix详解
2018/04/04 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python numpy实现文件存取的示例代码
2019/05/26 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
selenium如何定位span元素的实现
2021/01/13 Python
使用豆瓣源来安装python中的第三方库方法
2021/01/26 Python
canvas如何绘制钟表的方法
2017/12/13 HTML / CSS
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
Hotels.com拉丁美洲:从豪华酒店到经济型酒店的预定优惠和折扣
2019/12/09 全球购物
青年安全生产示范岗事迹材料
2014/05/04 职场文书
信息员培训方案
2014/06/12 职场文书
2014年城市管理工作总结
2014/12/02 职场文书
会计工作总结范文2014
2014/12/23 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
详解Redis实现限流的三种方式
2021/04/27 Redis
MongoDB误操作后使用oplog恢复数据
2022/04/11 MongoDB
Pandas实现批量拆分与合并Excel的示例代码
2022/05/30 Python