淡入淡出 选项卡（同时支持IE6,IE7,Firefox）

JS脚本部分：

 

window.onload = defaultInfo; var tt; function defaultInfo(){ fade('content1'); } function $(id){ return document.getElementById(id); } function fade(id){ var ii = 1,obj = document.getElementById(id),cArray = new Array(),newObj; if (!obj) return; if (tt) window.clearInterval(tt); newObj = $('content' + ii); while(newObj){ ii = cArray.push(newObj) + 1; newObj = $('content' + ii); } for(ii = 0;ii<=cArray.length-1;ii++){ if (obj != cArray[ii]) cArray[ii].style.display='none'; else{ obj.style.display = 'block'; alphaShow(obj); } } } function alphaShow(obj){ if (!obj) return; var value = 0; tt =window.setInterval(function(){ if (value<=100){ obj.style.filter = 'Alpha(opacity=' + value + ')'; obj.style.opacity = value * 0.01; value = value + 5; }else{ window.clearInterval(tt); } },50); }

样式

#tabs span { cursor:pointer; background-color: #ccc; } .ct { position: absolute; display: none; background-color: #FFCC66; filter: Alpha(opacity=0); opacity: 0.1; }

全部代码

选项1 选项2 选项3

内容1

内容2

内容3