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面向对象实现切换面板的更多相关文章

  1. 原生JS面向对象思想封装轮播图组件

    原生JS面向对象思想封装轮播图组件 在前端页面开发过程中,页面中的轮播图特效很常见,因此我就想封装一个自己的原生JS的轮播图组件.有了这个需求就开始着手准备了,代码当然是以简洁为目标,轮播图的各个功能 ...

  2. JS面向对象笔记二

    菜单导航,<JS面向对象笔记一>,  参考书籍:阮一峰之<JavaScript标准参考教程> 一.构造函数和new命令 二.this关键字 三.构造函数和new命令 四.构造函 ...

  3. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  4. ES6学习笔记（三）：教你用js面向对象思维来实现 tab栏增删改查功能

    前两篇文章主要介绍了类和对象.类的继承,如果想了解更多理论请查阅<ES6学习笔记(一):轻松搞懂面向对象编程.类和对象>.<ES6学习笔记(二):教你玩转类的继承和类的对象>, ...

  5. JS面向对象介绍

    JS面向对象介绍 首先面向对象是什么?为什么要使用面向对象. 因为JavaScript对每个创建的对象都会自动设置一个原型(谷歌火狐中是proto),指向它的原型对象prototype,举个例子: f ...

  6. js 面向对象 动态添加标签

    有点逻辑 上代码 thml布局 点击查看代码 <!DOCTYPE html> <html lang="en"> <head> <meta ...

  7. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

  8. 带你一分钟理解闭包--js面向对象编程

    上一篇<简单粗暴地理解js原型链--js面向对象编程>没想到能攒到这么多赞,实属意外.分享是个好事情,尤其是分享自己的学习感悟.所以网上关于原型链.闭包.作用域等文章多如牛毛,很多文章写得 ...

  9. JS面向对象（3） -- Object类，静态属性，闭包，私有属性， call和apply的使用，继承的三种实现方法

    相关链接: JS面向对象(1) -- 简介,入门,系统常用类,自定义类,constructor,typeof,instanceof,对象在内存中的表现形式 JS面向对象(2) -- this的使用,对 ...

随机推荐

  1. axios获取后端数据

    axios向后端请求数据时,一直获取不到数据, 后来改成这样写获取到了数据 不是一个this,有人说用箭头函数就可以了.

  2. G++ 编译多个源文件

    g++ -c *.cpp g++ graph.o maxflow.o test.o -o test  // 链接顺序必须写对

  3. Mysql的一些纪要

    unsigned 整型的每一种都分无符号(unsigned)和有符号(signed)两种类型(float和double总是带符号的),在默认情况下声明的整型变量都是有符号的类型(char有点特别),如 ...

  4. 想成长为一名年薪50万+的实战型架构师？必掌握这7大实战技能经验--阿里mike

    想成为一名架构师,但是架构师对应的技能,我应该掌握哪些啊?以及掌握的程度是什么样的?如何成为一名真正的实战性架构师? 我简要分为以下7点来谈谈,从技能的角度抛砖引玉,希望你对你架构师之路有一定的参考. ...

  5. python3.7 迭代器和生成器

    #!/usr/bin/env python __author__ = "lrtao2010" #python3.7 迭代器和生成器 #迭代器协议: ''' 1.迭代器协议是指:对象 ...

  6. 662. Maximum Width of Binary Tree

    https://leetcode.com/problems/maximum-width-of-binary-tree/description/ /** * Definition for a binar ...

  7. 机顶盒demux的工作原理

    在机顶盒中demux部分相对来说是比较复杂的部分,对于机顶盒软件开发的新手来说通常在这里会遇到一些困难,今天特意研究了一下驱动层代码,有一点自己的理解,因此写下来记录一下学习过程. 机顶盒中数据是如何 ...

  8. 二分答案：Poweroj2461-入门基础之二分答案(二分法的应用)

    传送门:点击打开链接 入门基础之二分答案 Time Limit: 1000 MS Memory Limit: 65536 KBTotal Submit: 179 Accepted: 33 Page V ...

  9. [BZOJ3312][USACO]不找零(状压DP)

    Description 约翰带着 N 头奶牛在超市买东西,现在他们正在排队付钱,排在第 i 个位置的奶牛需要支付 Ci元.今天说好所有东西都是约翰请客的,但直到付账的时候,约翰才意识到自己没带钱,身上 ...

  10. nable to execute dex: Multiple dex files define Lcom/chinaCEB/cebActivity/R

    用proguaid 只混淆Android项目的src下的包的话,如果出现了上面的问题: nable to execute dex: Multiple dex files define Lcom/chi ...