本例演示了一个竖向的选项卡自动切换的特效，简单实用
第一步：
在网页<head>区添加以下代码
<style>
.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;
border-right:1px solid #666;}
.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;}
#show{
width:200px;
height:100px;
background-color:#eee;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-right:1px solid #666;
line-height:30px;
}
</style>
<script language="javascript" type="text/javascript">
/*****************************************************
* Share JavaScript (http://www.ShareJS.com)
* 使用此脚本程序，请保留此声明
* 获取此脚本以及更多的JavaScript程序，请访问 http://www.ShareJS.com
******************************************************/
<!--
var n=1;//初始化n
var time=1000;//延迟时间
var strArr=new Array();//定义数组存放数据
strArr[0]="sharejs.com";//数据
strArr[1]="分享JavaScript";
strArr[2]="欢迎来到http://www.sharejs.com";
strArr[3]="JavaScript分享网";
function init(){document.getElementById("show").innerHTML = strArr[0];}//程序初始化
function show(){
n=n>strArr.length?1:n;//如果n>数组长度 则重新赋值为1，以便程序循环
for(i=1;i<(strArr.length+1);i++){//这里for用来改变当前tab的classname
if(i==n) document.getElementById("tab_"+i).className = "tab_on";
else document.getElementById("tab_"+i).className = "tab";
}
document.getElementById("show").innerHTML = strArr[n-1];//现实数据
n++;
}
setInterval("show()",time);//隔一秒执行一次，永远执行下去
//-->
</script>
第二步：
在网页<body>区添加以下代码
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
<td align="right">
<div id="tab_1" class="tab_on">1</div>
<div id="tab_2" class="tab" >2</div>
<div id="tab_3" class="tab" >3</div>
<div id="tab_4" class="tab">4</div>
</td>
<td bgcolor="#eeeeee">
<div id="show"></div>
</td>
</tr>
</table>
第三步：
修改<body>标签，添加OnLoad事件
<body onload="init()">
