[Js]面向对象的选项卡实例
中间过渡环节:把面向过程的程序,改写成面向对象的形式
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#div1 input {background:#CCC;}
#div1 .active {background:yellow;}
#div1 div {width:200px; height:200px; background:#CCC; display:none;}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
window.onload=function ()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div');
var i=0;
for(i=0;i<aBtn.length;i++)
{
aBtn[i].index=i;
aBtn[i].onclick=function ()
{
for(i=0;i<aBtn.length;i++)
{
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head>
<body>
<div id="div1">
<input class="active" type="button" value="教育" />
<input type="button" value="财经" />
<input type="button" value="aaa" />
<div style="display:block;">1asdfasdfds</div>
<div>2xzcvxzcv</div>
<div>5332342345</div>
</div>
</body>
</html>
改写注意事项:
1.前提:所有代码必须包含在window.onload里面
2.去掉函数嵌套(window.onload里面嵌套的函数拎到window.onload外面去)
3.不能有函数嵌套,但可以有全局变量(比如onclick函数拎出去后,aBtn是window.onload函数里的私有变量,onclick函数不能用)
过程:
1.onload(初始化整个程序)→构造函数(初始化一个对象)
2.全局变量→属性
3.函数→方法
window.onload=function(){
var oTab=new TabSwitch("div1");
}
function TabSwitch(id)
{
var oDiv=document.getElementById(id);
this.aBtn=oDiv.getElementsByTagName('input');
this.aDiv=oDiv.getElementsByTagName('div');
var i=0;
var _this=this; //this是new出来的对象,即oTab
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].index=i;
this.aBtn[i].onclick=function(){
_this.tab(this); //通过参数的形式,将被点击的按钮传到下面去
};
}
};
TabSwitch.prototype.tab=function(oBtn){
for(i=0;i<this.aBtn.length;i++)
{
this.aBtn[i].className='';
this.aDiv[i].style.display='none';
}
oBtn.className='active'; //要被点击的按钮改变,而不是new出来的对象,所以这里不用this
this.aDiv[oBtn.index].style.display='block';
}
[Js]面向对象的选项卡实例的更多相关文章
- 原生js面向对象编程-选项卡(自动轮播)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- 原生js面向对象编程-选项卡(点击)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- js面向对象的选项卡
前言: 选项卡在项目中经常用到,也经常写,今天在github突然看到一个面向对象的写法,值得收藏和学习. 本文内容摘自github上的 helloforrestworld/javascriptLab ...
- 以最简单的登录为例,诠释JS面向对象的简单实例
JavaScript,是前端开发人员必须会的一门技术,从JS演变出来的有很多框架,先说说几个热门的框架吧: JQuery:这个技术必须会,如果不会,那一定要会查api,知道怎么写,要看得懂英文文档,这 ...
- 原生js使用面向对象的方法开发选项卡实例教程
本教程通过js面向对象的方法来封装一个选项卡的实例,在实例中讲解js的面向对象如何实现功能. 一般封装好的选项卡程序,只需要一个div元素即可.其它元素都是通过json数据来生成,所以封装好的选项卡实 ...
- 第十五节 JS面向对象实例及高级
实例:面向对象的选项卡 把面向过程的程序,改写成面向对象的形式 原则:不能有函数套函数,但可以有全局变量 过程: onload —— 改写成 构造函数,其中window.onload的功能是在页面加载 ...
- js面向对象+一般方法的选项卡
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js原生设计模式——3简单工厂模式\js面向对象编程实例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8&qu ...
- js - 面向对象 - 小案例:轮播图、随机点名、选项卡、鼠标拖拽
面向对象 对象 : (黑盒子)不了解内部结构, 知道表面的各种操作. 面向对象 : 不了解原理的情况下 会使用功能 . 面向对象是一种通用思想,并非编程中能用,任何事情都能用. 编程语言的面向对象的特 ...
随机推荐
- [转载] 淘宝内部分享:怎么跳出MySQL的10个大坑(上)
原文: http://mp.weixin.qq.com/s?__biz=MzAxNjAzMTQyMA==&mid=209773318&idx=1&sn=e9600d3db80b ...
- python 将页面保存为word
将博客或者留言页面保存为word文档 -----------2016-5-11 14:40:04-- source:http://blog.csdn.net/how8586/article/detai ...
- nodejs学习笔记<二>简单的node服务器
在环境搭建好后,就可以开始动手架设(node驱动)一个简单的web服务器. 首先,nodejs还是用js编写.先来看一段node官网上的实例代码. var http = require('http') ...
- android瀑布流效果(仿蘑菇街)
Android 转载分享(10) 我们还是来看一款示例:(蘑菇街) 看起来很像我们的gridview吧,不过又不像,因为item大小不固定的,看起来是不是别有一番风味,确实如此. ...
- 工作流学习——Activiti整体认识二步曲 (zhuan)
http://blog.csdn.net/zwk626542417/article/details/46594505 ***************************************** ...
- maven寻找jar
http://mvnrepository.com/artifact/org.springframework/spring-context
- java 多线程4(死锁)
死锁现象: 死锁原因: 1.存在两个或两个以上的线程. 2.存在两个或两个或两个以上的共享资源. 死锁现象解决的方案: 没有方案只能尽量避免.
- Cache模拟器(CacheSim)
最近写了一个Cache的模拟器,由于平时空余时间比较分散,前前后后用了一周多的时间,基本实现的Cache的模拟功能(通过读取trace文件得到相应的命中率),能够实现直接映射.全相联.组相联三种 ...
- 响应式web设计读书笔记
1.媒体查询可以在链接link标签和具体的CSS中使用: 2.通过<link>标签的 media 属性为样式表指定设备类型和其他条件 中间用and和()来分隔,如下 <link r ...
- JavaScript开发者常忽略或误用的七个基础知识点
JavaScript 本身可以算是一门简单的语言,但我们也不断用智慧和灵活的模式来改进它.昨天我们将这些模式应用到了 JavaScript 框架中,今天这些框架又驱动了我们的 Web 应用程序.很多新 ...