一、横向切换：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>横的</title>
<style type="text/css">
* { margin:0; padding:0; font:12px Arial; }
#div { 320px; height:140px; border:1px solid #ccc; margin:100px auto; background:#eee; }
#div ul { list-style:none; }
#div li { display:block; 80px; float:left; height:25px; line-height:25px; text-align:center; }
.current { background:#eee; }
.tab { 80px; background-color:#ccc; border-bottom:1px solid #666; }
#show { text-align:center; }
</style>
<script language="javascript" type="text/javascript">
<!--
var n=1;
var time=500;//延迟时间
var strArr=new Array();
strArr[0]="11";
strArr[1]="22";
strArr[2]="33";
strArr[3]="44";
function init(){document.getElementById("show").innerHTML = strArr[0];}
function show(){
n=n>4?1:n;
for(i=1;i<(strArr.length+1);i++){
if(i==n) document.getElementById("tab_"+i).className = "current";
else document.getElementById("tab_"+i).className = "tab";
}
document.getElementById("show").innerHTML = strArr[n-1];
n++;
}
setInterval("show()",time);
window.onload = function(){
init();
}
//-->
</script>
</head>
<body>
<div id="div">
<ul>
<li id="tab_1" class="current">Tab_1</li>
<li id="tab_2" class="tab">Tab_2</li>
<li id="tab_3" class="tab">Tab_3</li>
<li id="tab_4" class="tab">Tab_4</li>
</ul>
<div id="show"></div>
</div>
</body>
</html>
二、纵向切换：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>纵的</title>
<style>
.tab{100px;height:25px;background-color:#ccc;margin:0;padding:0;
border-right:1px solid #666;}
.tab_on{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{
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">
<!--
var n=1;//初始化n
var time=1000;//延迟时间
var strArr=new Array();//定义数组存放数据
strArr[0]="选项111111111111111111";//数据
strArr[1]="选项222222222222222222";
strArr[2]="选项333333333333333333";
strArr[3]="选项444444444444444444";
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>
</head>
<body onload="init()">
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
<td align="right">
<div id="tab_1" class="tab_on"></div>
<div id="tab_2" class="tab" ></div>
<div id="tab_3" class="tab" ></div>
<div id="tab_4" class="tab"></div>
</td>
<td bgcolor="#eeeeee">
<div id="show"></div>
</td>
</tr>
</table>
</body>
</html>
三、同时具有自动与手动功能的：
<div>
<div class="menu">
<ul>
<li><a class="tab1" href="#" onmouseover="easytabs('1', '1');" onfocus="easytabs('1', '1');"
onclick="return false;" title="" id="tablink1">Tab 1</a></li>
<li><a class="tab2 tabactive" href="#" onmouseover="easytabs('1', '2');" onfocus="easytabs('1', '2');"
onclick="return false;" title="" id="tablink2">Tab 2 </a></li>
<li><a class="tab3" href="#" onmouseover="easytabs('1', '3');" onfocus="easytabs('1', '3');"
onclick="return false;" title="" id="tablink3">Tab 3 </a></li>
<li><a class="tab4" href="#" onmouseover="easytabs('1', '4');" onfocus="easytabs('1', '4');"
onclick="return false;" title="" id="tablink4">Tab 4 </a></li>
</ul>
</div>
<div style="display: none;" id="tabcontent1">
Tabcontent 1
</div>
<div style="display: block;" id="tabcontent2">
Tabcontent 2
</div>
<div style="display: none;" id="tabcontent3">
Tabcontent 3
</div>
<div style="display: none;" id="tabcontent4">
Tabcontent 4
</div>
</div>
<style>
{
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
}
.menu
{
background-color: #ececec;
color: #272727;
border-bottom: 1px solid #d7d7d7;
height: 23px;
300px;
}
.menu ul
{
margin: 0px;
padding: 0px;
list-style: none;
text-align: center;
}
.menu li
{
display: inline;
line-height: 23px;
}
.menu li a
{
color: #000000;
text-decoration: none;
padding: 4px 5px 6px 5px;
border-left: 1px solid #ececec;
border-right: 1px solid #ececec;
}
.menu li a.tabactive
{
border-left: 1px solid #d7d7d7;
border-right: 1px solid #d7d7d7;
background-color: #CCCCCC;
font-weight: bold;
position: relative;
}
#tabcontent1, #tabcontent2, #tabcontent3, #tabcontent4
{
border: 1px solid #ececec;
300px;
text-align: center;
padding: 6px 0px;
font-size: 12px;
margin-bottom: 5px;
}
</style>
<script>
//Set the id names of your tablink (without a number at the end)
var tablink_idname = new Array("tablink")
//Set the id name of your tabcontentarea (without a number at the end)
var tabcontent_idname = new Array("tabcontent")
//Set the number of your tabs
var tabcount = new Array("4")
//Set the Tab wich should load at start (In this Example:Tab 2 visible on load)
var loadtabs = new Array("2")
//Set the Number of the Menu which should autochange (if you dont't want to have a change menu set it to 0)
var autochangemenu = 1;
//the speed in seconds when the tabs should change
var changespeed = 1;
//should the autochange stop if the user hover over a tab from the autochangemenu? 0=no 1=yes
var stoponhover = 0;
/*Swich EasyTabs Functions - no need to edit something here*/
function easytabs(menunr, active) {if (menunr == autochangemenu){currenttab=active;}if ((menunr == autochangemenu)&&(stoponhover==1)) {stop_autochange()} else if ((menunr == autochangemenu)&&(stoponhover==0)) {counter=0;}menunr = menunr-1;for (i=1; i <= tabcount[menunr]; i++){document.getElementById(tablink_idname[menunr]+i).className='tab'+i;document.getElementById(tabcontent_idname[menunr]+i).style.display = 'none';}document.getElementById(tablink_idname[menunr]+active).className='tab'+active+' tabactive';document.getElementById(tabcontent_idname[menunr]+active).style.display = 'block';}var timer; counter=0; var totaltabs=tabcount[autochangemenu-1];var currenttab=loadtabs[autochangemenu-1];function start_autochange(){counter=counter+1;timer=setTimeout("start_autochange()",1000);if (counter == changespeed+1) {currenttab++;if (currenttab>totaltabs) {currenttab=1}easytabs(autochangemenu,currenttab);restart_autochange();}}function restart_autochange(){clearTimeout(timer);counter=0;start_autochange();}function stop_autochange(){clearTimeout(timer);counter=0;}
window.onload=function(){
var menucount=loadtabs.length; var a = 0; var b = 1; do {easytabs(b, loadtabs[a]); a++; b++;}while (b<=menucount);
if (autochangemenu!=0){start_autochange();}
}
</script>