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. for循环和数组练习

    //公鸡2文,母鸡1文,小鸡半文,每种至少一只,100文买100只鸡有多少种可能 var ci =0; for(var g=1;g<50;g++){ for(var m=1;m<100;m ...

  2. Python基础2-Python中文乱码（转）

    转自:https://blog.csdn.net/apache0554/article/details/53889253 前言:中文编码问题一直是程序员头疼的问题,而Python2中的字符编码足矣令新 ...

  3. 三十二、MySQL 导出数据

    MySQL 导出数据 MySQL中你可以使用SELECT...INTO OUTFILE语句来简单的导出数据到文本文件上. 使用 SELECT ... INTO OUTFILE 语句导出数据 以下实例中 ...

  4. mysql零散操作

    添加对外用户 CREATE USER 'admin'@'%' IDENTIFIED BY '!QAZ2wsx'; GRANT ALL PRIVILEGES ON *.* TO 'admin'@'%'; ...

  5. 极路由安装SS，SSR，搬运，侵权删除

    打开路由器的开发者模式 使用SSH,登录到路由器后台 复制以下代码,粘贴即可 cd /tmp $ echo "127.0.0.1 hiwifiss.ml" > /etc/ho ...

  6. Terrorist’s destroy HDU - 4679

    Terrorist’s destroy HDU - 4679 There is a city which is built like a tree.A terrorist wants to destr ...

  7. spring-data-mongodb

    [引入maven依赖] <!-- mongodb spring --> <dependency>     <groupId>org.springframework. ...

  8. Tomcat之web.xml中的<url-pattern>标签

    关于web.xml配置中的<url-pattern> 标签<url-pattern> <url-pattern>是我们用Servlet做Web项目时需要经常配置的标 ...

  9. WampServer配置说明

    注意:所有的修改操作都要重启WampServer服务器,部分需要重启WampServer软件 1.修改默认端口 1)打开文件:C:\wamp\bin\apache\apache2.4.9\conf\h ...

  10. 赢友网络通用框架V10.0.0（WinuAppSoft) 基础框架设计表

    /* * 版权所有:赢友网络(http://www.winu.net/) * 开发人员:新生帝(JsonLei) * 设计名称:赢友网络通用框架V10.0.0(WinuAppSoft) * 设计时间: ...