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

<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. 差之毫厘谬之千里！带你认识CPU后缀含义

    intel的几代CPU中,后缀字母主要有以下几种: M:笔记本专用CPU,一般为双核,M前面一位数字是0,意味着是标准电压处理器,如果是7,则是低电压处理器. U:笔记本专用低电压CPU,一般为双核, ...

  2. 在VNC中Xfce4中Tab键失效的解决方法

    说明 在Ubuntu Server 14.04上安装了xfce4桌面环境,但是却发现在终端中Tab键不能自动补齐(但是Ctrl + I 仍然可以用). 出现这种情况的原因是,由于Tab键的功能被窗口快 ...

  3. 【Todo】【读书笔记】大数据Spark企业级实战版 & Scala学习

    下了这本<大数据Spark企业级实战版>, 另外还有一本<Spark大数据处理:技术.应用与性能优化(全)> 先看前一篇. 根据书里的前言里面,对于阅读顺序的建议.先看最后的S ...

  4. iOS开发者帐号流程

    http://ask.dcloud.net.cn/article/152 iOS证书(.p12)和描述文件(.mobileprovision)申请 5+App开发 Apple证书 iOS证书 iOS有 ...

  5. JS重要知识点(转载 学习中。。。)

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要).彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的. 讲解还是以示例代码搭配注释的形式,这里做个小目录: JS代码预解析原 ...

  6. [转]c++面向对象基础

    from: here 1. C++面向对象程序设计的重要概念 早期革命影片里有这样一个角色,他说:“我是党代表,我代表党,我就是党.”后来他给同志们带来了灾难. 会用C++的程序员一定懂得面向对象程序 ...

  7. linux下在jar包中找类是否存在

    find /usr/lib -name "*.jar" -exec grep -Hsli 类名 {} \;

  8. RTB

    RTB —— Real Time Bidding 的简称,就是实时竞价.跟传统购买形式相比,RTB是在每一个广告展示曝光的基础上进行竞价,就是每一个PV都会进行一次展现竞价,谁出价高,谁的广告就会被这 ...

  9. Eclipse启动tomcat时报错：Multiple Contexts have a path of "/xxx"

    今天使用Eclipse启动tomcat部署项目时,遇到一个奇怪的错误: Could not publish server configuration for Tomcat v6.0 Server at ...

  10. java程序员应该掌握的技能

    这是看了一篇大神说的java程序员应该会些什么的文章,这里只是把应该掌握的技能部分列了出来. static.final.transient.volatile关键字,内部类,泛型等 static最需要记 ...