js面向对象实现切换面板
js面向对象的特点:
继承(inheritance):对象方法和属性的继承
多态(polymorphism):组件开发
抽象(abstract):抓住核心问题
封装(encapsulation):把功能写出方法
面向过程式切换面板实现:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>切换面板</title>
<style>
#div1 input {
background: white;
} #div1 input.active {
background: yellow;
} #div1 div {
width: 200px;
height: 200px;
background: #CCC;
display: none;
}
</style>
<script>
window.onload = function() {
var div = document.getElementById('div1');
var ipt = oDiv.getElementsByTagName('input');
var divContents = oDiv.getElementsByTagName('div');
for(var i = 0; i < aBtn.length; i++) {
ipt[i].index = i;
ipt[i].onclick = function() {
//隐藏所有,显示所点击面板
for(var i = 0; i < ipt.length; i++) {
ipt[i].className = ''
ipt[i].style.display = 'none';
}
this.className = 'active';
ipt[this.index].style.display = 'block';
};
}
};
</script> </head> <body>
<div id="div1">
<input class="active" type="button" value="aaa" />
<input type="button" value="bbb" />
<input type="button" value="ccc" />
<div style="display:block;">saysomething</div>
<div>sayHello</div>
<div>sayGoodbye</div>
</div>
</body>
</html>
面向对象方法:
window.onload = function() {
new TabSwitch('div1');
}; function TabSwitch(id) {
//将属性挂到this
var _this = this;//注意this的改变
var div = document.getElementById(id);
this.ipt = div.getElementsByTagName('input');
this.divContents = div.getElementsByTagName('div'); for(var i = 0; i < this.ipt.length; i++) {
this.ipt[i].index = i;
this.ipt[i].onclick = function() {
_this.fnClick(this);
};
}
};
//函数不嵌套,方法写入原型
TabSwitch.prototype.fnClick = function(ref) {
for(var i = 0; i < this.ipt.length; i++) {
this.ipt[i].className = ''
this.divContents[i].style.display = 'none';
}
ref.className = 'active';
this.divContents[ref.index].style.display = 'block';
}
js面向对象实现切换面板的更多相关文章
- 原生JS面向对象思想封装轮播图组件
原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...
- JS面向对象笔记二
菜单导航,<JS面向对象笔记一>, 参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...
- js面向对象、创建对象的工厂模式、构造函数模式、原型链模式
JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...
- ES6学习笔记(三):教你用js面向对象思维来实现 tab栏增删改查功能
前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...
- JS面向对象介绍
JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...
- js 面向对象 动态添加标签
有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
- 带你一分钟理解闭包--js面向对象编程
上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...
- JS面向对象(3) -- Object类,静态属性,闭包,私有属性, call和apply的使用,继承的三种实现方法
相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...
随机推荐
- js表单序列化时,非空判断
在项目中,对于数据的传输一般需要非空的判断,而数据字段较多时一般直接将表单序列化,此时如何判断非空,如下 因为将表单序列化时,数据格式为 trainKind=1&trainKindCode=1 ...
- LigerUi中表(Grid)控件的相关属性笔记
http://blog.csdn.net/dxnn520/article/details/8216560 // ========================================= [每 ...
- 你不知道的c++11
随着C++11的发布,C++这门语言有了本质上的提升.C++14,C++17的相继推出,更是让C++这门语言达到了一个新高度.新的标准库设施,新的语法,让我们得以书写更加安全.便捷.高效的程序. 20 ...
- python虚拟环境 virtualenv工具
为了隔离各类环境,保证环境间不冲突,python中存在虚拟环境,可以在一个文件夹里生成相应的环境,防止与python自带环境冲突 首先我们下载virtualenv,若你未安装python,应到pyth ...
- h5中的video与audio
·首先带大家熟悉一下video标签的属性方法,根据属性方法做一个小demo, HTML5支持的视频格式: Ogg 带有Theora视频编码+Ogg文件 支持的浏览器:F.O MEPG4 带有H.26 ...
- 【css】cursor鼠标指针光标样式知识整理
在前端开发中,我们经常需要对对象鼠标指针光标进行控制,比如鼠标经过超链接时变成手指形状.在这里整理一下cursor鼠标指针光标样式的知识,记录与方便以后查找. 1.常用cursor光标 div( cu ...
- OpenFaceswap 入门教程(3): 软件参数篇!
OpenFaceswap 的使用可以说是非常简单,只要稍加点拨就可以学会,厉害一点的人根本不需要教程,直接自己点几下就知道了.看了前面安装篇和使用篇.我想大多数人应该会了. 当学会了使用之后,你可能对 ...
- 06.VUE学习之非常实用的计算属性computed实例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- oracle redo 重做日志文件
以下易容翻译自oracle dba官方文档,不足之处还望指出. 管理重做日志文件 学习目标:1.解释重做日志文件的目的2.描述重做日志文件的结构3.学会控制日志切换与检查点4.多元化管理重做日志文件5 ...
- 常见/dev/mapper/centos-root扩容
系统Centos 7 df -h 查看当前分区使用情况: dfisk /dev/xvda 对/dev/xvda磁盘进行操作(新建分区及格式化) n p 回车 默认分区号: 回车 默认磁盘创建开始位置: ...