<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#content_main_top{
height: 80px;
line-height: 80px;
text-align: center;
border-bottom:1px solid #888888;
}
#content_main_top input{
padding:10px 15px;
margin-left: 5px;
background-color: #2B2B2B;
color: #FFFFFF;
outline: none;
border:none;
}
ul{
list-style: none;
}
li{
float:left;
padding:30px 40px;
}
img{
width:200px;
height:150px;
}
.show{display: block;}
.hide{display: none;}
</style>
</head>
<body>
<div id="content_main_top">
<input type="button" name="btn" class="btn1" value="全部" />
<input type="button" name="btn" class="btn2" value="建站案例" />
<input type="button" name="btn" class="btn3" value="应用案例" />
<input type="button" name="btn" class="btn4" value="运维案例" />
<ul>
<li><img src="img/33.jpg"/></li>
<li><img src="img/img/12.jpg"/></li>
<li><img src="img/img/25.jpg"/></li>
<li><img src="img/img/39.jpg"/></li>
</ul>
<ul class="hide">
<li><img src="img/33.jpg"/></li>
<li><img src="img/img/12.jpg"/></li>
</ul>
<ul class="hide">
<li><img src="img/33.jpg"/></li>
<li><img src="img/img/12.jpg"/></li>
<li><img src="img/img/39.jpg"/></li>
</ul>
<ul class="hide">
<li><img src="img/33.jpg"/></li>
</ul>
</div>

<script type="text/javascript">
//方法一：面向过程的选项卡
/* window.onload=function (){
var Abtn=document.getElementById("content_main_top");
var Bbtn=Abtn.getElementsByTagName("input");
var imgboxlist=Abtn.getElementsByTagName("ul");
for(var i=0;i<Bbtn.length;i++){
Bbtn[i].index=i;
Bbtn[i].onclick=function(){
for(var j = 0; j< imgboxlist.length; j++) {
imgboxlist[j].className = "hide";
}
imgboxlist[this.index].className = "show";
}
}
}*/

// 方法二:面向对象的选项卡,实现对代码的可复用性
function TabSwitch(id){
var _this=this;
var Abtn=document.getElementById(id);
this.Bbtn=Abtn.getElementsByTagName("input");
this.imgboxlist=Abtn.getElementsByTagName("ul");
for(var i=0;i<this.Bbtn.length;i++){
this.Bbtn[i].index=i;
this.Bbtn[i].onclick=function(){
_this.fnclick(this);
};
}
}
TabSwitch.prototype.fnclick=function(oo){
// alert(this);
for(var j = 0; j<this.imgboxlist.length; j++) {
this.imgboxlist[j].className = "hide";
}
this.imgboxlist[oo.index].className = "show";
}
new TabSwitch("content_main_top");
</script>
</body>
</html>

面向对象和面向过程的js版选项卡的更多相关文章

  1. 面向对象和面向过程的jquery版选项卡

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <script src ...

  2. JS高级---体会面向对象和面向过程的编程思想

    体会面向对象和面向过程的编程思想 ChangeStyle是自定义的构造函数,再通过原型添加方法的函数. 实例化对象,导入json参数,和创建cs,调用原型添加的方法函数 过渡,先熟悉记忆 <!D ...

  3. 大话JS面向对象之扩展篇 面向对象与面向过程之间的博弈论（OO Vs 过程）------（一个简单的实例引发的沉思）

    一,总体概要 1,笔者浅谈 我是从学习Java编程开始接触OOP(面向对象编程),刚开始使用Java编写程序的时候感觉很别扭(面向对象式编程因为引入了类.对象.实例等概念,非常贴合人类对于世间万物的认 ...

  4. 面向对象与面向过程 $this的注意事项和魔术方法set和get

    一.面向对象与面向过程的区别: 二者都是一种思想,面向对象是相对于面向过程而言的.面向过程,强调的是功能行为.面向对象,将功能封装进对象,强调具备了功能的对象.面向对象更加强调运用人类在日常的思维逻辑 ...

  5. JavaSE——面向对象与面向过程、类与对象、(属性、方法、构造器)等

    一:面向对象与面向过程 二者都是一种思想,面向对象是相对于面向过程而言的. 面向过程: 1.面向过程思想强调的是过程(动作). 2.在面向过程的开发中,其实就是面向着具体的每一个步骤和过程,把每一个步 ...

  6. Java基础知识强化20：面向对象和面向过程的思想对比

    面向对象与面向过程的区别  1. 与面向对象编程思想相比较的,往往是面向过程的编程思想,其实在我来理解,两者并不冲突,原因是面向对象的编程也必须使用面向过程的思维来实现具体的功能,所以我认为,两者的区 ...

  7. python的面向对象和面向过程

    一.面向对象和面向过程的区别: a.面向过程: 1)根据业务逻辑从上到下写代码 2)开发思路是将数据和函数按照执行的逻辑顺序组织在一起 3)分开考虑数据与函数 定义性文字: 面向对象编程(Object ...

  8. 面向对象和面向过程，python中的类class，python中程序的入口——main方法，

    1.程序入口,让main显现出来: print(__name__)#__name___是模块中的隐藏字段,当前模块运行的函数名 if __name__ == __main__ __main__() # ...

  9. PHP面向对象和面向过程

    编程界不论是PHP.Python都有这么两种编程思想,oop面向对象.pop面向过程,这两种在功能上没有多大区别,但是在代码编写上却有很大区别.今天就记录一下面向对象和面向过程的优点.缺点.定义.实现 ...

随机推荐

  1. Atitit.去除水印的方案

    Atitit.去除水印的方案 1.1. 查找水印的位置 Kegwa imgd posit zo ok le .. Auto find d zo troub ...manu easy 1.2. 还原去除 ...

  2. SharePoint 2013 网站搜索规则的使用示例

    前言 SharePoint 2013搜索中,有一个非常好用的细化搜索结果的功能,就是“查询规则”.可以通过对于某些特定查询时,起到细化显示结果的作用.下面,我们简单的介绍一下该功能的使用和效果. 1. ...

  3. php 7.0 安装mcrypt

    1. 添加ppa源 sudo add-apt-repository ppa:ondrej/php 2. 升级源 sudo apt-get update && sudo apt-get ...

  4. .net 配置文件设计工具 Configuration Section Designer

    Configuration Section Designer 简称 CSD 下载及英文介绍地址点击我 以下为简单使用说明 选择自己需要的版本安装好该设计插件之后重启vs 新建选择 在工具栏里选择想使用 ...

  5. 在 CentOS7 之部署 Redis3

    CentOS7 之 Redis3 学习笔记 1 Redis 官网: http://www.redis.io/ 2 Redis 的下载地址: http://download.redis.io/relea ...

  6. Windows on Device 项目实践 4 - 智能风扇制作

    在前面的文章中,我们已经学习并且利用Intel Galileo开发板和Windows on Device制作了火焰报警器.感光灯和PWM调光灯.在这个项目中,我们来利用温度传感器和直流电机,完成一个简 ...

  7. Linux LVM学习总结——放大LV容量

    本篇介绍LVM管理中的命令lvresize,我们先创建一个卷组VG VolGroup02,它建立在磁盘/dev/sdc (大小为8G)上.创建逻辑卷LV时,我们故意只使用了一小部分.具体情况如下所示 ...

  8. Java之TreeMap

    基本特性: 基于红黑树. 非线程安全. 同步使用: SortedMap m = Collections.synchronizedSortedMap(new TreeMap(...))

  9. 《java JDK7 学习笔记》之继承与多态

    1.面向对象中,子类继承父类,避免重复的行为定义,不过并非为了避免重复定义行为就使用继承.应该正确判断使用继承的时机及继承之后灵活的运用多态,才是学习继承时的重点. 2.程序代码重复在程序设计上,就是 ...

  10. MYSQL的常用命令和增删改查语句和数据类型

    连接命令:<a href="http://lib.csdn.net/base/mysql" class='replace_word' title="MySQL知识库 ...