<!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. ubuntu 16.04卸载不必要的默认安装软件

    两个办法,一个在ubuntu软件里一个一个删,明显的windows下做法. 还有一个通过终端来删除.ctrl+alt+t打开终端. 1.卸载libreoffices(要删一起删了,然后去装office ...

  2. Java 8后的首个长期支持版本Java 11

    Java 11是Java8后的首个长期支持版本.按照 Oracle 公布的支持路线图,Java 11 将会获得 Oracle 提供的长期支持服务,直至2026年9月. 按照官方的说法,新的发布周期会严 ...

  3. SmartGit 授权Non-Commerical

    Window: %APPDATA%/syntevo/SmartGit/ 搜索settings.xml, 并且移除这个文件 重启

  4. Linux Centos配置ssh客户端工具putty

      配置ssh客户端工具putty 1.直接点击putty.exe文件 2.配置putty 3.配置putty编码 4.配置putty字体大小 5.配置putty样式 6.保存配置信息 7.配置MTp ...

  5. 基于结构化平均感知机的分词器Java实现

    基于结构化平均感知机的分词器Java实现 作者:hankcs 最近高产似母猪,写了个基于AP的中文分词器,在Bakeoff-05的MSR语料上F值有96.11%.最重要的是,只训练了5个迭代:包含语料 ...

  6. Linux命令之shutdown

    shutdown命令安全地将系统关机. 有些用户会使用直接断掉电源的方式来关闭linux,这是十分危险的.因为linux与windows不同,其后台运行着许多进程,所以强制关机可能会导致进程的数据丢失 ...

  7. Vim NerdTree

    参考链接:http://yang3wei.github.io/blog/2013/01/29/nerdtree-kuai-jie-jian-ji-lu/ 切换工作台和目录 ctrl + w + h 光 ...

  8. 进程锁 Lock

    进程锁其实是锁的输入终端,屏幕,太多的进程,为了防止打印错乱而锁,作用不大 from multiprocessing import Process, Lock def f(l, i): l.acqui ...

  9. 浅谈负margin

    通常来说margin为正值时,我们很清楚其布局形式,即在border边界线处再往外扩展指定长度.可margin为负又表示什么呢,表示始于border边界线处并向内扩展指定长度,这样,下一个文档流对象便 ...

  10. SpringCloud之声明式服务调用 Feign（三）

    一 Feign简介 Feign是一种声明式.模板化的HTTP客户端,也是netflix公司组件.使用feign可以在远程调用另外服务的API,如果调用本地API一样.我们知道,阿里巴巴的doubbo采 ...