这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
这篇文章主要介绍了 JS 基于面向对象实现的选项卡效果, 结合实例形式分析了 javascript 基于面向对象技术动态操作页面元素的流程与相关注意事项, 需要的朋友可以参考下
本文实例讲述了 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';
- }
希望本文所述对大家 JavaScript 程序设计有所帮助。
来源: http://www.phperz.com/article/17/0516/329376.html