tab page step-by-step

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



prototype


& script.aculo.us




are so powerful[b]

[/b]







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

[/b]







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


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








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

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


  
    
    
    
    
  
  
    tab1
    tab2
    tab3
    tab4
  
[/b]

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

[/b]







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







分析一下，这是一个怎么样的过程

初始化 > t1处于选中状态，为黄色；上边的img1显示

鼠标点击tab1，没变化

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

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


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







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







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


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

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;
	}

v0.1.1，代码少多了

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;] step3.
[/size]
[b][size=x-large;]Prototype.js[/size]

[/b]


引入prototype.js，版本号升至v0.2

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;
			}
	});

未完待续。。。