选项卡例子html,[Js]面向对象的选项卡实例

中间过渡环节：把面向过程的程序，改写成面向对象的形式

xmlns="http://www.w3.org/1999/xhtml">

#div1

input {background:#CCC;}

#div1 .active {background:yellow;}

#div1 div

{width:200px; height:200px; background:#CCC;

display:none;}

content="text/html; charset=utf-8"

/>

无标题文档

window.οnlοad=function

()

{

var

oDiv=document.getElementById(‘div1‘);

var

aBtn=oDiv.getElementsByTagName(‘input‘);

var

aDiv=oDiv.getElementsByTagName(‘div‘);

var

i=0;

for(i=0;i

{

aBtn[i].index=i;

aBtn[i].οnclick=function ()

{

for(i=0;i

{

aBtn[i].className=‘‘;

aDiv[i].style.display=‘none‘;

}

this.className=‘active‘;

aDiv[this.index].style.display=‘block‘;

};

}

};

id="div1">

value="教育" />

/>

/>

style="display:block;">1asdfasdfds

2xzcvxzcv

5332342345

改写注意事项:

1.前提:所有代码必须包含在window.onload里面

2.去掉函数嵌套(window.onload里面嵌套的函数拎到window.onload外面去)

3.不能有函数嵌套，但可以有全局变量(比如onclick函数拎出去后，aBtn是window.onload函数里的私有变量，onclick函数不能用)

过程：

1.onload→构造函数

2.全局变量→属性

3.函数→方法

原文：http://www.cnblogs.com/zhangwenkan/p/3739344.html