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

<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. CentOS6.4_常用命令

    1. 查看本机是否安装了 xxx软件,以及 xxx软件 的版本信息等: rpm -qa |grep  xxx(xxx代表软件名) 2. rpm -ivh 要安装的rpm文件包 3. 不care依赖项的 ...

  2. Python学习（3）变量类型

    目录 变量赋值 多个变量赋值 标准数据类型 Python数字 Python字符串 Python列表 Python元组 Python元字典 Python数据类型转换 type数据类型查看 变量赋值 Py ...

  3. spring data jpa 创建方法名进行简单查询

    版权声明:本文为博主原创文章,未经博主允许不得转载. spring data jpa 可以通过在接口中按照规定语法创建一个方法进行查询,spring data jpa 基础接口中,如CrudRepos ...

  4. 转：Effective c + + notes

    补充自己的. 转自:http://blog.csdn.net/ysu108/article/details/9853963#t0 Effective C++ 笔记 目录(?)[-] 第一章 从C转向C ...

  5. Mysql的一些小知识点

    MySQL简介:是由瑞典的MySQL AB公司开发的,目前是Oracle(甲骨文)公司扥一个关系型数据库产品(2008年MySQL AB公司被Sun公司收购,2009年Sun公司又被 Oracle公司 ...

  6. Embed对象

    1.EMBED 元素 | embed 对象 http://www.jb51.net/shouce/dhtml/objects/EMBED.html 2. 3.

  7. 基于gralde搭建spring boot项目

    搭建基于gradle的sprint boot项目,swagger-ui辅助 spring boot官网:http://projects.spring.io/spring-boot/get start ...

  8. js中Math.random()生成指定范围数值的随机数

    http://www.111cn.net/wy/js-ajax/57062.htm Math.random() 这个方法相信大家都知道,是用来生成随机数的.不过一般的参考手册时却没有说明如何用这个方法 ...

  9. Calendar类中add/set/roll方法的区别

    欢迎和大家交流技术相关问题: 邮箱: jiangxinnju@163.com 博客园地址: http://www.cnblogs.com/jiangxinnju GitHub地址: https://g ...

  10. 35 个免费创新的响应式 HTML5 模板

    HTML5 和响应式都是 Web 开发领域中的热门技术,本文向你推荐 35 个免费的响应式 HTML5 模板,将两种技术完美结合. Mori responsive HTML5 Template Res ...