js面向对象学习笔记（五）：tab切换
重点是this指向问题
<style>
.hide{display: none;}
#box div,#box1 div{display: none;}
.hover{background: #fff666;}
</style>
<script>
// window.onload = function () {
// var aParent = document.getElementById('box');
// var aInput = aParent.getElementsByTagName('input');
// var aDiv = aParent.getElementsByTagName('div');
// for(var i=0;i<aInput.length;i++){
// //索引
// aInput[i].index = i;
//
// aInput[i].onclick = function () {
// //清除全部的样式
// for(var i=0;i<aInput.length;i++){
// aInput[i].className ='';
// aDiv[i].style.display = 'none';
// }
// this.className = 'hover';
// aDiv[this.index].style.display = 'block';
// }
// }
// }
//先变形
//尽量不要出现函数嵌套函数
//可以有全局变量
//把onload中不是赋值语句放到单独的函数中
// var aParent = null;
// var aInput = null;
// var aDiv = null;
// window.onload = function () {
// aParent = document.getElementById('box');
// aInput = aParent.getElementsByTagName('input');
// aDiv = aParent.getElementsByTagName('div');
//
// init();
// };
// function init() {
// for(var i=0;i<aInput.length;i++){
// //索引
// aInput[i].index = i;
//
// aInput[i].onclick = onChange;
// }
// }
//
// function onChange() {
// //清除全部的样式
// for(var i=0;i<aInput.length;i++){
// aInput[i].className ='';
// aDiv[i].style.display = 'none';
// }
// this.className = 'hover';
// aDiv[this.index].style.display = 'block';
// } //改成面向对象
//全局变量就是属性
//函数就是方法
//onload中创建对象
//改this指向问题: 事件或者定时器,尽量让面向对象中的this指向对象 window.onload = function () {
var t1 = new Tab('box');
t1.init();
t1.autoPlay();
var t2 = new Tab('box1');
t2.init();
t2.autoPlay();
}; function Tab(id) {
this.aParent = document.getElementById(id);
this.aInput = this.aParent.getElementsByTagName('input');
this.aDiv = this.aParent.getElementsByTagName('div');
this.isNow = 0;
}
Tab.prototype.init = function () {
//让this指向对象
var This = this;
for(var i=0;i<this.aInput.length;i++){
//索引
this.aInput[i].index = i;
this.aInput[i].onclick = function(){
//this.onChange(); //1.当前的this是指向按钮的
This.onChange(this);//3.把按钮的this当参数传过去
}
}
};
Tab.prototype.onChange = function (btnThis) {
//清除全部的样式
for(var i=0;i<this.aInput.length;i++){
this.aInput[i].className ='';
this.aDiv[i].style.display = 'none';
}
btnThis.className = 'hover';
this.aDiv[btnThis.index].style.display = 'block';
};
Tab.prototype.autoPlay = function () {
var This = this;
setInterval(function () {
if (This.isNow == This.aInput.length-1){
This.isNow = 0;
}else {
This.isNow ++;
}
for(var i=0;i<This.aInput.length;i++){
This.aInput[i].className ='';
This.aDiv[i].style.display = 'none';
}
This.aInput[This.isNow].className = 'hover';
This.aDiv[This.isNow].style.display = 'block'; },2000);
}; </script>
</head>
<body>
<div id="box">
<input class="hover" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
</div>
<div id="box1">
<input class="hover" type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<div style="display: block">1111</div>
<div>2222</div>
<div>3333</div>
</div>
</body>
js面向对象学习笔记（五）：tab切换的更多相关文章
- js面向对象学习笔记
1.函数的定义方式 第一种定义方式 function fn1() { alert("fn1"); } alert(fn) 函数就是一个特殊的对象,是一个Function类的实例,其 ...
- js面向对象学习笔记（三）：原型
//原型:改写对象下面公用的方法或者属性,让公用的方法或者属性在内存中只存在一份(提高性能)//原型:prototype :要写在构造函数的下面var arr =[1,2,3,4,5];var arr ...
- js面向对象学习笔记（四）：对象的混合写法
//对象的混合写法//1.构造函数function 构造函数() { this.属性}构造函数.原型.方法 = function () {};//调用var 对象1 = new 构造函数();对象1. ...
- js面向对象学习笔记（二）：工厂方式:封装函数
//工厂方式:封装函数function test(name) { var obj = new Object(); obj.name = name; obj.sayName = function () ...
- js面向对象学习笔记（一）：创建空对象，理解this指向
var obj = new Object();//创建一个空对象 obj.name = '小王';//属性 obj.sayName = function () { //对象方法 对象最重要的是this ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 前端学习:JS(面向对象)代码笔记
前端学习:JS(面向对象)代码笔记 前端学习:JS面向对象知识学习(图解) 创建类和对象 创建对象方式1调用Object函数 <body> </body> <script ...
- ES6学习笔记<五> Module的操作——import、export、as
import export 这两个家伙对应的就是es6自己的 module功能. 我们之前写的Javascript一直都没有模块化的体系,无法将一个庞大的js工程拆分成一个个功能相对独立但相互依赖的小 ...
- Java IO学习笔记五：BIO到NIO
作者:Grey 原文地址: Java IO学习笔记五:BIO到NIO 准备环境 准备一个CentOS7的Linux实例: 实例的IP: 192.168.205.138 我们这次实验的目的就是直观感受一 ...
随机推荐
- （转载）Eclipse将引用了第三方jar包的Java项目打包成可执行jar的两种方法
转载自:http://www.cnblogs.com/lanxuezaipiao/p/3291641.html 方案一:用Eclipse自带的Export功能 步骤1:准备主清单文件 "MA ...
- Error Running Git Empty git --version output:IDEA关联GitHub时出现这个错误
刚刚学习使用idea中,想要把自己的项目上传到github,遇到这样一个问题,先记录下来,到时候解决了在把方法贴出来. ---------------------------------------- ...
- Linux 学习记录 一(安装、基本文件操作).
Linux distributions主要分为两大系统,一种是RPM方式安装软件的系统,包括Red Hat,Fedora,SuSE等都是这类:一种则是使用Debian的dpkg方式安装软件的 ...
- Linux 运行级别
本文同时发表在https://github.com/zhangyachen/zhangyachen.github.io/issues/47 运行级别 不同运行级别的描述 运行级别0:系统停机状态,系统 ...
- 串口调试者v2.1------开源c#串口调试工具
第一步:上图 第二步:上代码 >>>>>>>>>>>源代码下载<<<<<<<<< ...
- 系统内置委托：Func/Action
lSystem.Func 代表有返回类型的委托 lpublic delegate TResult Func<out TResult>(); lpublic delegate TResul ...
- Xamarin 调用JSON.net来解析JSON 转（Model） json2csharp.com/
https://www.cnblogs.com/zjoch/p/4458516.html 再来我们要怎么解析JSON格示呢?在.net 中,我们很孰悉的JSON.net,没错,我们依然可以在Xam ...
- git环境搭建以及第一个PHP程序
使用mac下的sublime等编辑器帮助代码编写,然后到linux下运行网页代码.可以通过/vagrant共享目录完成,但是默认apache默认目录为/var/www/html,不想改变该目录,同时为 ...
- SQLServer 索引总结
测试案例: SET STATISTICS IO ON SET STATISTICS TIME ON SET STATISTICS PROFILE ON SELECT count(A.CarrierT ...
- HTTP结构
HTTP结构 转载请注明出处:HTTP结构简介 HTTP通信过程包括从客户端发往服务器的请求和服务器返回客户端的响应,这篇文章就简单的了解一下HTTP请求和响应的结构与协议本身的状态管理. 用户HTT ...