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. 使用 RuPengGame游戏引擎包 建立游戏窗体 如鹏游戏引擎包下载地址 Thread Runnable 卖票实例

    package com.swift; import com.rupeng.game.GameCore;//导入游戏引擎包 //实现Runnable接口 public class Game_RuPeng ...

  2. Vue 父组件传值到子组件

    vue 父组件给子组件传值中 这里的AccessList就是子组件 如果 是静态传值的话直接  msg="xxx"就好 这里动态取值的话就  :msg=xxxxx ________ ...

  3. 第27题：Leetcode226: Invert Binary Tree反转二叉树

    翻转一棵二叉树. 示例: 输入: 4 / \ 2 7 / \ / \ 1 3 6 9 输出: 4 / \ 7 2 / \ / \ 9 6 3 1  思路 如果根节点存在,就交换两个子树的根节点,用递归 ...

  4. LAMP PHP 详解

    目录 LAMP PHP 详解 LAMP 请求流程与原理 PHP 简介 PHP Zend Engine Opcode php 配置详解 php 加速器 部署LAMP 使用 php 连接 mysql 最基 ...

  5. 十一、Shell 文件包含

    Shell 文件包含 和其他语言一样,Shell 也可以包含外部脚本.这样可以很方便的封装一些公用的代码作为一个独立的文件. Shell 文件包含的语法格式如下: . filename # 注意点号( ...

  6. Java 技术栈

    JAVA是一个面向对象的编程语言,由SUN公司的程序员所开发.它不仅吸收了C++的各种优点,而且还撇弃了C++中难以理解的概念,如多继承.指针等:因此JAVA语言具有功能强大且简单易用两个特征, JA ...

  7. 基于js原生封装的点击显示完整文字

    基于js原生封装的点击显示完整文字 (function(window) { var inner = ''; var showCont_s = function(ele) { this.init.app ...

  8. js浮点数加减乘除

    浮点数精确计算 /** ** 加法函数,用来得到精确的加法结果 ** 说明:javascript的加法结果会有误差,在两个浮点数相加的时候会比较明显.这个函数返回较为精确的加法结果. ** 调用:ac ...

  9. php微信红包算法

    微信红包算法.php /**生成红包的函数*/ function getRandMoney($totalMoney, $totalPeople=2, $miniMoney=1){ $randRemai ...

  10. eclipse快捷键（shift+ctrl+l能出来所有的快捷键）

    [ALT+/]此快捷键为用户编辑的好帮手,能为用户提供内容的辅助,不要为记不全方法和属性名称犯愁,当记不全类.方法和属性的名字时,多体验一下[ALT+/]快捷键带来的好处吧. 2 [Ctrl+O]显示 ...