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. Oracle Analyze

    Analyze使用场景 之前很多次都说到,对表的索引等信息进行了增删改之后,需要对表进行analyze更新统计信息,才能使数据库做出最好的执行计划,没有注意到,即使是一张很小的空表,如果进行了字段的增 ...

  2. java算法面试题：有一个字符串，其中包含中文字符、英文字符和数字字符，请统计和打印出各个字符的个数 按值的降序排序，如果值相同则按键值的字母顺序

    package com.swift; import java.util.HashMap; import java.util.Map; import java.util.Map.Entry; publi ...

  3. 梁勇(Danniel Liang) java教材例题：java程序购买额按税率求营业税 java中数值保留2位小数的方法

    package com.swift; import java.util.Scanner; public class PurchaseTaxDecimalsTwo { public static voi ...

  4. Java程序设计第四次作业内容 第五次作业10月9号发布，为第三章全部例题

    第六题:使用判断语句,根据数字,输出对应的中文是星期几? 直接使用一个if语句的情况 int weekDay=3; if(weekDay==1){ sop("今天是星期一"); } ...

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

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

  6. Linux下 tomcat 的开机自启动设置

    每次开机都要启动tomcat,非常麻烦:通过直接修改系统文件,实现tomcat自启动: 1. 修改脚本文件rc.local:vim /etc/rc.d/rc.local 这个脚本是使用者自定的开机启动 ...

  7. django+xadmin在线教育平台（五）

    3-3 django orm介绍与model设计 上节教程完成后代码(来学习本节前置条件): 对应commit: 留言板前端页面展示.本次内容截止教程3-2结束. 可能现在你还在通过手写sql语句来操 ...

  8. js中如何把RGB颜色转换为16进制颜色

    将RGB颜色值转换为16进制颜色值,主要是将 R.G.B 值分别转换为对应的十六进制值,填入 #RRGGBB 中. 推荐在线颜色转换工具:http://www.ecjson.com/rgbhex/ 例 ...

  9. 关于 composer 的一些坑

    发布自己的『包.库』至 https://packagist.org 却一直不能引入 网络上所有关于新建composer包的教程文章统统只提到了版本可能会影响无法 require 深深的坑哭了我们这些入 ...

  10. I2C总线协议图解（转载）

    转自:http://blog.csdn.net/w89436838/article/details/38660631 另外,https://blog.csdn.net/qq_38410730/arti ...