tab page step-by-step

[size=xx-large;][b]Preface[/b]
[/size]


[b][i]prototype[/i]

[/b]
& [i][b]script.aculo.us[/b]

[b]
[/b]
[/i]
[b]are so powerful[i][b] [/b]
[/i]
[/b]


[b]

[/b]


[b][b][size=xx-large;]Mission, sir?[/size]
[/b]
[/b]


[b]

[/b]


[b]接到一份html，要求让它动起来。tab页，能点、能自动切换，图片展示。[/b]


[b][img]/upload/attachment/64719/e5fa479a-7b4e-3029-ac80-b3a82cbc543a.png" alt="" width="400" height="200[/img]
[/b]


[b]

[/b]


[b]为了简化说明，只取出其中需要关心的部分，并去掉了多余的样式[/b]

[b]
#img2, #img3, #img4 { display: none; }
.on { background-color: #FFFF99 }
.off { background-color: brown }









    tab1
    tab2
    tab3
    tab4

[/b]

[b]

[/b]


[b][b][size=xx-large;]Step by step[/size]
[/b]
[/b]


[b]

[/b]


[size=x-large;][b]step1. [b]必要的分析[/b]
[/b]
[/size]


[b]

[/b]


[b]分析一下，这是一个怎么样的过程[/b]


[list=1]
[b]初始化 > t1处于选中状态，为黄色；上边的img1显示[/b]

[b]鼠标点击tab1，没变化[/b]

[b]鼠标点击其他的tab，例如tab3 > t1变棕色；t3选中，变成黄色；上边的img1消失，img3显示出来[/b]

[/list]
[b]把自动切换和手动点击，统一成tab被click（只不过click的主语不一样），就可以暂时无视自动切换的问题[/b]


[b]- -! 有一个问题需要声明一下：基本的js，是没办法生成那个标准的onclick事件的。我将借助prototype库的事件扩展完成它。[/b]


[b]

[/b]


[size=x-large;][b]step2. [b]简单实现[/b]
[/b]
[/size]


[b]

[/b]


[b]v0.1，简单、有效、而且ie和火狐都没问题。但是，代码太多了，还都是重复的 - -!……[/b]


[b]稍微有点儿追求的人，都不能就这么着使吧[/b]

current = 1;

t1.onclick = function(){
		document.getElementById('img'+current).style.display = 'none';
		document.getElementById('t'+current).className = 'off';	
		document.getElementById('img1').style.display = 'block';
		document.getElementById('t1').className = 'on';
		current = 1;
	}
t2.onclick = function(){
		document.getElementById('img'+current).style.display = 'none';
		document.getElementById('t'+current).className = 'off';	
		document.getElementById('img2').style.display = 'block';
		document.getElementById('t2').className = 'on';
		current = 2;
	}
t3.onclick = function(){
		document.getElementById('img'+current).style.display = 'none';
		document.getElementById('t'+current).className = 'off';	
		document.getElementById('img3').style.display = 'block';
		document.getElementById('t3').className = 'on';
		current = 3;
	}
t4.onclick = function(){
		document.getElementById('img'+current).style.display = 'none';
		document.getElementById('t'+current).className = 'off';	
		document.getElementById('img4').style.display = 'block';
		document.getElementById('t4').className = 'on';
		current = 4;
	}

[b]v0.1.1，代码少多了[/b]

current = 1;

for(i = 1; i <= 4; i++){
	document.getElementById('t'+i).onclick = click;
}
function click (){
	i = this.id.substring(1);
	document.getElementById('img'+current).style.display = 'none';
	document.getElementById('t'+current).className = 'off';	
	document.getElementById('img'+i).style.display = 'block';
	document.getElementById('t'+i).className = 'on';
	current = i;
}

[size=x-large;][b]step3.[/b]
[/size]
[b] [b][size=x-large;]Prototype.js[/size]
[/b]
[/b]


[b]引入prototype.js，版本号升至v0.2[/b]

current = 1;

[1, 2, 3, 4].each(function(item){
		$('t'+item).onclick = function(){
				$('img'+current).setStyle({'display': 'none'});
				$('t'+current).className = 'off';	
				$('img'+item).setStyle({'display': 'block'});
				$('t'+item).className = 'on';
				current = item;
			}
	});

[b]未完待续。。。[/b]