<!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. ArcGIS中国工具应用:固定比例尺固定纸张批量打印

    ArcGIS中国工具应用:固定比例尺固定纸张批量打印 下载地址:http://files.cnblogs.com/files/gisoracle/a3batchprint.zip 固定A3,比例尺1: ...

  2. 来自沪江、滴滴、蘑菇街架构师的 Docker 实践分享

    架构师小组交流会是由国内知名公司架构师参与的技术交流会,每期选择一个时下最热门的技术话题进行实践经验分享. Docker 作为当前最具颠覆性的开源技术之一,其轻量虚拟化.可移植性是 CI/CD.Dev ...

  3. Android刷机教程之LG Nexus 5X线刷官方Nexus系列教程

    镜像下载地址:https://developers.google.com/android/nexus/images 1.打开手机 设置-关于手机-点击版本号7次,以打开“开发者选项” 2.返回上一步, ...

  4. JDBC快速入门

    /** * JDBC快速入门: * 1.导入jar包 数据库驱动 * 2.注册驱动 * 3.获取数据库连接对象 Connection * 4.定义sql语句 * 5.获取发送执行sql语句的对象 St ...

  5. 使用 Fiddler 上传微信公众账号 自定义菜单

    0.你必须有微信公众账号的服务号.成为开发者之后.... 1.得到你的 appid (xxxxxxoooo)和 secret (oooooooxxxxxxx) 2.用这个链接得到你的 access_t ...

  6. ORACLE opatch命令学习实践

      opatch 是ORACLE开发的用来安装,卸载,检测patch冲突.管理ORACLE所有已经安装的补丁的工具,当然这是一个命令工具.opatch命令工具一般位于$ORACLE_HOME/OPat ...

  7. composer "Illegal offset type in isset or empty"报错解决方案

    最近更新了composer版本,即执行以下任一命令 composer selfupdate | composer self-update 再次执行 composer update -vvv 会出现“I ...

  8. Python列表list的用法

    #!usr/bin/env python# -*-coding:utf-8-*-#以下方法全在python2.7.x版本运行,请3.x以上的小伙伴们在print(放入括号内执行)#list列表的常用方 ...

  9. Fetch：下一代 Ajax 技术

    Ajax,2005年诞生的技术,至今已持续了 10 年.它是一种在客户端创建一个异步请求的技术,本质上它不算创新,是一组技术的组合.它的核心对象是 XMLHttpRequest. 简单回顾下历史 19 ...

  10. js跨域那些事

    原文:http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html 什么是跨域 JavaScript出于安全方面的考虑,不允许跨域调用其 ...