<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>tab-oop</title>

 </head>

 <style>

     #div1 div{

         width: 200px;

         height: 200px;

         border: 1px solid red;

         background-color: #ccc;

         display: none;

     }

     button{

         background: white;

     }

     #div1 button.active{

         background: yellow;

     }

 </style>

 <body>

         <div id="div1">

             <button class="active">aaa</button>

             <button>bbb</button>

             <button>ccc</button>

             <div style="display: block;">aaa</div>

             <div>bbb</div>

             <div>ccc</div>

         </div>

 </body>

 <script>

     window.onload=function(){

         new TabSwitch('div1');

     }

     function TabSwitch(id){

         var _this=this;

         var oDiv=document.getElementById(id);

         this.aBtn=document.getElementsByTagName('button');

         this.aDiv=oDiv.getElementsByTagName('div');

         for(var i=0;i<this.aBtn.length;i++){

             this.aBtn[i].index=i;

             this.aBtn[i].onclick=function(){

                 _this.fnClick(this);

             }

         }

     }

     TabSwitch.prototype.fnClick=function(oBtn){

         for(var i=0;i<this.aBtn.length;i++){

             this.aBtn[i].className='';

             this.aDiv[i].style.display='none';

         }

         oBtn.className='active';

         this.aDiv[oBtn.index].style.display='block';

     }

 </script>

 </html>

OOP学习的更多相关文章

  1. oop学习 计算器类的规划

    类的学习 题目要求 采取面向对象的方法,四则运算自动出题软件,根据需求可以划分为几个类?每个类具有什么属性?每个类具有什么行为? 类与类之间是如何进行协作的?谁给谁发送消息?谁持有谁的引用? 该自动出 ...

  2. ruby oop学习

    class Man def initialize(name,age) @name=name @age=age end def sayName puts @name end def sayAge put ...

  3. OOP 学习笔记汇总

    1.1 引用 1.2 const关键字 1.3 动态内存分配 1.4 内联函数和重载函数函数参数缺省值 1.5 类和对象的基本概念与用法1 2.1 类和对象的基本概念2

  4. OOP复习笔记

    /*OOP相关的代名词不做讲解*/ OOP的三大特征: 封装 - 继承 - 多态 -----------------------------------目录---------------------- ...

  5. 【LabVIEW技巧】LabVIEW OOP怎么学

    前言 有很多人对LabVIEW OOP存在比较极端的看法,大致分为两类: 1. 绝对否定派认为LabVIEW OOP只不过是LabVIEW为了追求时髦,在面向过程的基础上用簇做了一些特性,实际上完全不 ...

  6. Object Pascal对象模型中构造函数之研究

    http://www.delphi2007.net/delphiblog/html/delphi_2004511950333715.html 前言 近期,一直在使用 C++ 与 Object Pasc ...

  7. css重构之旅

    css重构之旅 >前言: 今年我大一,马上就要大二了.从高三毕业暑假到大学的这一年马上过去,马上迎来大二生活学习前端也有将近一年了.一昧去追求那些视觉的效果和相对高端和新颖的技术,反而忽略了最基 ...

  8. Python 面向对象4-继承

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # O ...

  9. Python 面向对象3-类变量与实例变量

    #!/usr/bin/env python # -*- coding:utf-8 -*- # 作者:Presley # 邮箱:1209989516@qq.com # 时间:2018-08-05 # O ...

随机推荐

  1. Gravitational Teleport docker-compose简单运行

    Gravitational Teleport 可以作为堡垒机进行使用,为了测试方便使用docker-compose 运行一个all in one 的demo 备注: 官方提供的docker-compo ...

  2. deno学习四 docker 运行官方的一个http file server

    github 上已经有人搞了一个deno 的docker 镜像,是基于源码编译的,挺好的 所以结合官方的http server demo 使用docker 运行 环境准备 docker-compose ...

  3. 使用Managed Extensibility Framework方便的扩展应用程序

    概述 Managed Extensibility Framework(MEF)是.NET平台下的一个扩展性管理框架,它是一系列特性的集合,包括依赖注入(DI)以及Duck Typing等.MEF为开发 ...

  4. laya的UI编辑器

    //加载一个图集 Laya.loader.load("res/atlas/comp.json",Handler.create(this,this.onLoaderComp), Ha ...

  5. 线性代数笔记10——矩阵的LU分解

    在线性代数中, LU分解(LU Decomposition)是矩阵分解的一种,可以将一个矩阵分解为一个单位下三角矩阵和一个上三角矩阵的乘积(有时是它们和一个置换矩阵的乘积).LU分解主要应用在数值分析 ...

  6. COLUMN_FORMAT 的值：FIXED、DYNAMIC、DEFAULT 的区别（待补充）

    参考===MySQL 建表语句 create table 中的列定义: column_definition: data_type [NOT NULL | NULL] [DEFAULT default_ ...

  7. linux centos6 yum 安装lamp

    centos 6.5 1.yum安装和源代码编译在使用的时候没啥区别,但是安装的过程就大相径庭了,yum只需要3个命令就可以完成,源代码需要13个包,还得加压编译,步骤很麻烦,而且当做有时候会出错,源 ...

  8. C#编程的最佳工具

    C#是企业中广泛使用的编程语言,特别是那些依赖微软的程序语言.如果您使用C#构建应用程序,则最有可能使用Visual Studio,并且已经寻找了一些扩展来对您的开发进行管理.但是,这个工具列表可能会 ...

  9. [1] 注解（Annotation）-- 深入理解Java：注解（Annotation）基本概念

    转载 http://www.cnblogs.com/peida/archive/2013/04/23/3036035.html 深入理解Java:注解(Annotation)基本概念 什么是注解(An ...

  10. JavaScript压缩代码解压缩还原具体办法

    我们知道许多网站都对Javascript代码进行了压缩,但这对开发者和学习者来说,读起来很费劲,本文分享给大家在Chrome浏览器中,如何使用Pretty Print功能反压缩JS代码,让代码更加直观 ...