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 我们这次实验的目的就是直观感受一 ...
随机推荐
- 解决jquery.zclip.js插件无法复制的问题
网页中需要用到点击复制,在使用webpack加载jquery以及jquery.zclip.js后,出现了以下情况: jquery顺利加载 zclip插件顺利加载 ZeroClipboard.swf顺利 ...
- vue2 vue-rout
vue 2.0的路由比起1.0简单了许多,分为以下几个步骤: 1.创建路由块和视图块: to里面是要切换的路径名称 <div id="app"> <div> ...
- lesson - 3 笔记 ls /alias /ldd /cd /pwd /环境变量 / 目录
一.ls 命令 作用:用来显示目录列表. 语法: ls (选项) (参数) 选项: -a: 显示所有档案以及目录(ls内定将档案或目录名称为“./..”的视为隐藏) -A: 显示除隐藏文件“./.. ...
- NumPy学习笔记 一
NumPy学习笔记 一 <NumPy学习笔记>系列将记录学习NumPy过程中的动手笔记,前期的参考书是<Python数据分析基础教程 NumPy学习指南>第二版.<数学分 ...
- css3特效样式库
直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
- IIS加载JSON文件 错误 404
问题描述 在发布项目的时候,有一些文件是json文件,在网页中进行加载,但是在IIS7发布的时候,json文件居然是404,无法找到,在URL上输入地址也一样. 错误原因 IIS内部机制,不支持直接访 ...
- Git详解之五：分布式Git
为了便于项目中的所有开发者分享代码,我们准备好了一台服务器存放远程 Git 仓库.经过前面几章的学习,我们已经学会了一些基本的本地工作流程中所需用到的命令.接下来,我们要学习下如何利用 Git 来组织 ...
- JavaScript的DOM编程--06--两个实验
<html> <head> <meta http-equiv="Content-Type" content="text/html; char ...
- [APIO2010]特别行动队
题目描述 你有一支由 n 名预备役士兵组成的部队,士兵从 1 到 n 编号,要将他们拆分 成若干特别行动队调入战场.出于默契的考虑,同一支特别行动队中队员的编号 应该连续,即为形如(i, i + 1, ...
- Android JNI so库的开发
build.gradle的配置 apply plugin: 'com.android.application'android { compileSdkVersion 26 buildToolsVers ...