中间过渡环节：把面向过程的程序，改写成面向对象的形式

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
    var oDiv=document.getElementById('div1');
    var aBtn=oDiv.getElementsByTagName('input');
    var aDiv=oDiv.getElementsByTagName('div');
    var i=0;
    
    for(i=0;i<aBtn.length;i++)
    {
        aBtn[i].index=i;
        aBtn[i].onclick=function ()
        {
            for(i=0;i<aBtn.length;i++)
            {
                aBtn[i].className='';
                aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
        };
    }
};
</script>
</head>

<body>
<div id="div1">
    <input class="active" type="button" value="教育" />
    <input type="button" value="财经" />
    <input type="button" value="aaa" />
    <div style="display:block;">1asdfasdfds</div>
    <div>2xzcvxzcv</div>
    <div>5332342345</div>
</div>
</body>
</html>

改写注意事项:

1.前提:所有代码必须包含在window.onload里面

2.去掉函数嵌套（window.onload里面嵌套的函数拎到window.onload外面去）

3.不能有函数嵌套，但可以有全局变量（比如onclick函数拎出去后，aBtn是window.onload函数里的私有变量，onclick函数不能用）

过程：

1.onload(初始化整个程序)→构造函数(初始化一个对象)

2.全局变量→属性

3.函数→方法

window.onload=function(){
    var oTab=new TabSwitch("div1");
}
function TabSwitch(id)
{
    var oDiv=document.getElementById(id);
    this.aBtn=oDiv.getElementsByTagName('input');
    this.aDiv=oDiv.getElementsByTagName('div');
    var i=0;
    var _this=this;          //this是new出来的对象，即oTab
    for(i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].index=i;
        this.aBtn[i].onclick=function(){
            _this.tab(this);    //通过参数的形式，将被点击的按钮传到下面去
        };
        
    }
};
TabSwitch.prototype.tab=function(oBtn){
    for(i=0;i<this.aBtn.length;i++)
    {
        this.aBtn[i].className='';
        this.aDiv[i].style.display='none';
    }
    oBtn.className='active';    //要被点击的按钮改变，而不是new出来的对象，所以这里不用this
    this.aDiv[oBtn.index].style.display='block';
}

[Js]面向对象的选项卡实例的更多相关文章

  1. 原生js面向对象编程-选项卡(自动轮播)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  2. 原生js面向对象编程-选项卡(点击)

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  3. js面向对象的选项卡

    前言: 选项卡在项目中经常用到,也经常写,今天在github突然看到一个面向对象的写法,值得收藏和学习. 本文内容摘自github上的 helloforrestworld/javascriptLab  ...

  4. 以最简单的登录为例，诠释JS面向对象的简单实例

    JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这 ...

  5. 原生js使用面向对象的方法开发选项卡实例教程

    本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...

  6. 第十五节 JS面向对象实例及高级

    实例:面向对象的选项卡 把面向过程的程序,改写成面向对象的形式 原则:不能有函数套函数,但可以有全局变量 过程: onload —— 改写成 构造函数,其中window.onload的功能是在页面加载 ...

  7. js面向对象+一般方法的选项卡

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  8. js原生设计模式——3简单工厂模式\js面向对象编程实例

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  9. js - 面向对象 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

    面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...

随机推荐

  1. 从linux系统mysql导出数据库

    原文:http://blog.csdn.net/lifuxiangcaohui/article/details/50763674 1.MySQL数据库导出 /usr/local/mysql/bin/m ...

  2. String.join()方法的使用

    String.join()方法是JDK1.8之后新增的一个静态方法,使用方式如下所示: String  result = String.join("-","java&qu ...

  3. linux 静态库、共享库

    http://blog.chinaunix.net/uid-26833883-id-3219335.html http://blog.chinaunix.net/uid-23069658-id-314 ...

  4. IOS开发证书变成“此证书的签发者无效”解决方法

    IOS开发证书全部变成无效,如下图  打包提示错误  解决方法: 1. 下载https://developer.apple.com/certificationauthority/AppleWWDRCA ...

  5. Illegal mix of collations (big5_chinese_ci,IMPLICIT) and (utf8_general_ci,COERCIBLE) for operation 'like'

    解释: 非法的混合排序规则(big5_chinese_ci)和(utf8_general_ci)操作“like”. 原本是单个字段查询数据的,现在是把所有的字段用一个搜索框来查询. 主要出问题是下列这 ...

  6. SO_REUSEADDR 和 SO_REUSEPORT

    大部分内容来自stackoverflow上的回答:Socket options SO_REUSEADDR and SO_REUSEPORT, how do they differ? Do they m ...

  7. windows多线程框架

    #include <iostream> #include <windows.h> using namespace std; HANDLE hMutex; //public : ...

  8. SpringMVC简单构造restful, 并返回json

    https://my.oschina.net/u/2272916/blog/352297

  9. phalcon: 过滤（Phalcon\Filter（））

    过滤,就是清除不需要的数据,留下想要的数据. 其调用方法如下,一: $filter = new \Phalcon\Filter(); $filter->sanitize("some(o ...

  10. WEB网页插件 如何实现 选择上传图片路径 【高级问题】

    发表于 2010-10-22 12:11 | |只看楼主       按键精灵程序里面的WEB网页插件 如何实现 选择上传图片路径 我想在上传图片的选框设置图片路径为 C:\fakepath\001. ...