<!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. 关于SharePoint 2013的工作流（一）

    从去年开始,一直和SharePoint 2013工作流打交道.自己瞎摸索,以实现功能为目的.直到如今也不知道走的路是否正确. 一开始用WF4发现整个都不一样了,用的xaml无法写后端代码.Google ...

  2. LruCache缓存

    LruCache通常用于实现内存缓存,采用的缓存算法是LRU(Least Recently Used)即近期最少使用算法,其核心思想是:当缓存满的时候,会优先淘汰那些近期最少使用的缓存对象. 1.Lr ...

  3. DIY一个高大上带提醒的计时器，简单实用，你还在等什么

    小编心语:锵锵锵!小编我又来了!昨天发了一篇比较实用的<Python聊天室>,鉴于反响还不错,SO ,小编也想给大家多分享点有用的干货,让大家边学边用.好了,闲话不多说,今天要给各位看官们 ...

  4. yii2分页的基本使用及其配置详解

    作者:白狼 出处:http://www.manks.top/yii2_linkpager_pagination.html 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置 ...

  5. sp_executesql得到执行sql语句的返回值

    执行 sql语句,得到 变量的值 ' declare @Partition int; ); ); SET @SQLString = N'SELECT @RangeKeyOUT = $PARTITION ...

  6. XML语言基础3--Schema

    1.什么是Schema XML Schema是用一套预先规定的XML元素和属性创建的,这些元素和属性定义了XML文档的结构和内容模式. XML Schema规定XML文档实例的结构和每个元素/属性的数 ...

  7. vim vundle 安装Base16 Vim主题

    1.vim /etc/vimrc set background=dark colorscheme base16-default 2.同样在vimrc中的vundle位置添加 Plugin 'chris ...

  8. WinHEC 2015 深圳之行

    在上个月,本人有幸在MVP Team和MVP Lead的帮助下,参加了微软在深圳召开的WinHEC 2015大会. 在本次大会上,见证了微软和国内企业的合作,并且发布一些关于在Windows 10方面 ...

  9. [MySQL Reference Manual] 10 全球化

    10.全球化 本章主要介绍全球化,包含国际化和本地化,的一些问题: ·         MySQL在语句中支持的字符集 ·         如何为服务配置不同的字符集 ·         选择错误信息 ...

  10. CPU 和内存虚拟化原理 - 每天5分钟玩转 OpenStack（6）

    前面我们成功地把 KVM 跑起来了,有了些感性认识,这个对于初学者非常重要.不过还不够,我们多少得了解一些 KVM 的实现机制,这对以后的工作会有帮助. CPU 虚拟化 KVM 的虚拟化是需要 CPU ...