javascript

标签页:自动切换的Tab

作者:admin 日期:2008-11-02

字体大小: 小 中 大
<!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{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">
<!--
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>



'引用自http://www.52515.net:8088/file.asp?fileid=313939322672713d323030372d31312d3426626f61726469643d3632


文章来自: 本站原创
引用通告地址: http://www.is21.cn/trackback.asp?tbID=483
Tags:
评论: 0 | 引用: 0 | 查看次数: 2508
发表评论
你没有权限发表留言！