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

<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. JCO事务管理

    /* * 标准对账单过账 * @account 标准对账单号 * @year 年度 */ public List<String> doAccountStatmentPost(String ...

  2. 内部使用final参数的原因

    局部内部类(即:定义在方法中的内部类),访问方法中的局部变量 : 局部变量的生命周期与对象的生命周期的不一致性!方法在执行完方法的局部变量就消失,而内部类如果有引用还是存在的,那么将找不到变量.此时设 ...

  3. mysql 倒引号

    1.在mysql中,保留字不能作为表名,字段名等用处,如下:mysql> alter table student add column desc varchar(16) after name;1 ...

  4. ORACLE数据库DBMS_JOB的创建与使用

    http://my.oschina.net/u/2309120/blog/371437 创建 DBMS_JOB 使用以下语句: VARIABLE jobno number;begin DBMS_JOB ...

  5. Python循环嵌套

    可以在循环体内嵌入其他的循环体,如在while循环中可以嵌入for循环, 反之,你可以在for循环中嵌入while循环. 实例: 以下实例使用了嵌套循环输出3~13之间的素数: 以上实例输出结果: F ...

  6. fragment入门

    [1]在activity布局中定义fragment <?xml version="1.0" encoding="utf-8"?> <Linea ...

  7. jsp实时显示后台批处理进度 - out分块，简单的长连接方式

    这两天在实现一个批处理操作,但是想让前台实时显示后台批处理进度,本想着用复杂一些的框架可以实现异步信息调用 但是鉴于是内部管理系统,且只有一两个人用到这个功能,所以做了一个简单的长连接方式的实时响应 ...

  8. Android监听Button和ImageButton控件的点击事件

    一.onClick事件 Button和ImageButton都有一个onClick事件,通过自身的.setOnClickListener(OnClickListener)方法添加点击事件 所有的控件都 ...

  9. 别人要访问我的电脑上部署的tomcat，必须关闭防火墙吗？

    局域网内要访问服务器上部署的tomcat,必须关闭防火墙吗? 不一定. 如果是需要使用 IP:端口号(ip:port)来访问,可以做以下设置(这里仅是说的tomcat访问). 首先在服务器的控制面板中 ...

  10. kafka常用操作命令

    1.启动Kafka,其中">>/dev/null"表示将日志信息输出到"黑洞",其中"2>&1"表示将错误信息和前 ...