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的使用,对 ...
随机推荐
- 使用 RuPengGame游戏引擎包 建立游戏窗体 如鹏游戏引擎包下载地址 Thread Runnable 卖票实例
package com.swift; import com.rupeng.game.GameCore;//导入游戏引擎包 //实现Runnable接口 public class Game_RuPeng ...
- Vue 父组件传值到子组件
vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接 msg="xxx"就好 这里动态取值的话就 :msg=xxxxx ________ ...
- 第27题:Leetcode226: Invert Binary Tree反转二叉树
翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1 思路 如果根节点存在,就交换两个子树的根节点,用递归 ...
- LAMP PHP 详解
目录 LAMP PHP 详解 LAMP 请求流程与原理 PHP 简介 PHP Zend Engine Opcode php 配置详解 php 加速器 部署LAMP 使用 php 连接 mysql 最基 ...
- 十一、Shell 文件包含
Shell 文件包含 和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filename # 注意点号( ...
- Java 技术栈
JAVA是一个面向对象的编程语言,由SUN公司的程序员所开发.它不仅吸收了C++的各种优点,而且还撇弃了C++中难以理解的概念,如多继承.指针等:因此JAVA语言具有功能强大且简单易用两个特征, JA ...
- 基于js原生封装的点击显示完整文字
基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...
- js浮点数加减乘除
浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...
- php微信红包算法
微信红包算法.php /**生成红包的函数*/ function getRandMoney($totalMoney, $totalPeople=2, $miniMoney=1){ $randRemai ...
- eclipse快捷键(shift+ctrl+l能出来所有的快捷键)
[ALT+/]此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2 [Ctrl+O]显示 ...