javascript 定时自动切换的选项卡Tab

　　这里要注意,用于产生changeTabInterval的随机数，防止页面上TabPane过多，如果设置的changeTabInterval都一样的话会产生整齐划一的切换的效果，不美观.

<title>自动切换Tab选项卡</title> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%20%0D%0Afunction%20randint(m%2Cn)%2F%2F%E4%BA%A7%E7%94%9Fm-n%E4%B9%8B%E9%97%B4%E7%9A%84%E9%9A%8F%E6%9C%BA%E6%95%B4%E6%95%B0%20%0D%0A%7B%20%0D%0A%20%20%20%20return%20Math.random()*(n-m)%2Bm%3B%20%0D%0A%7D%20%0D%0Afunction%20IfNull(a%2Cdv)%20%0D%0A%7B%20%0D%0A%20%20%20%20return%20typeof(a)%20%3D%3D%22undefined%22%3Fdv%3Aa%3B%20%0D%0A%7D%20%0D%0A%0D%0Avar%20TabPaneConfig%20%3D%20%7B%20%0D%0AidPrefix%3A%20%22tab-panel-object-%22%2C%20%0D%0AidCounter%3A%200%2C%20%0D%0AgetId%3A%20function()%7B%20return%20this.idPrefix%2Bthis.idCounter%2B%2B%3B%7D%2C%20%0D%0AtabHeadId%3A%20%22tabHead%22%2C%20%0D%0AtabHeadClass%3A%20%22tab-head%20tab-border%22%2C%20%0D%0AtabBodyId%3A%20%22tabBody%22%2C%20%0D%0AtabBodyClass%3A%20%22tab-border%22%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20TabPane(id%2CchangeTabInterval%2CisAutoChangeTab)%7B%20%0D%0Athis.id%20%3D%20id%3B%20%0D%0Athis.height%20%3D%20%22100%25%22%3B%20%0D%0Athis.width%20%3D%20%22100%25%22%3B%20%0D%0A%0D%0Athis.tabPages%20%3D%200%3B%20%0D%0Athis.head%20%3D%20null%3B%20%0D%0Athis.body%20%3D%20null%3B%20%0D%0A%0D%0Athis.changeTabInterval%3DIfNull(changeTabInterval%2C10)%3B%20%0D%0Athis.isAutoChangeTab%3DIfNull(isAutoChangeTab%2Ctrue)%3B%20%0D%0Athis.changeTabTimerId%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%0D%0ATabPane.prototype.init%20%3D%20function()%7B%20%0D%0Avar%20r%20%3D%20document.getElementById(this.id)%3B%20%0D%0Aif(!r.style.overflow)%20r.style.overflow%20%3D%20%22auto%22%3B%20%0D%0Ar.className%20%3D%20%22tab%22%3B%20%0D%0A%0D%0A%2F%2Fcreate%20head%20%0D%0Avar%20div%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adiv.id%20%3D%20TabPaneConfig.tabHeadId%3B%20%0D%0Adiv.className%20%3D%20TabPaneConfig.tabHeadClass%3B%20%0D%0A%0D%0Ar.appendChild(div)%3B%20%0D%0Athis.head%20%3D%20div%3B%20%0D%0A%0D%0Avar%20ul%20%3D%20document.createElement(%22ul%22)%3B%20%0D%0Adiv.appendChild(ul)%3B%20%0D%0A%0D%0A%2F%2Fcreate%20body%20%0D%0Adiv%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adiv.id%20%3D%20TabPaneConfig.tabBodyId%3B%20%0D%0Adiv.className%20%3D%20TabPaneConfig.tabBodyClass%3B%20%0D%0A%0D%0Ar.appendChild(div)%3B%20%0D%0Athis.body%20%3D%20div%3B%20%0D%0A%0D%0Aif(this.isAutoChangeTab)%20%0D%0A%7B%20%0D%0A%20%20%20%20%20var%20tabPane%20%3D%20this%3B%20%0D%0A%20%20%20%20%20this.changeTabTimerId%20%3D%20setInterval(function()%7BonChangeTabTimer(tabPane)%3B%7D%2Cthis.changeTabInterval*1000)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0ATabPane.prototype.stopChangeTabTimer%20%3D%20function%20()%20%0D%0A%7B%20%0D%0A%20%20%20%20if(this.isAutoChangeTab)%20%0D%0A%7B%20%0D%0AclearInterval(this.changeTabTimerId)%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0A%0D%0ATabPane.prototype.addTabPage%20%3D%20function(obj)%20%0D%0A%7B%20%0D%0Aif(!document.getElementById(obj.panel))%20return%3B%20%0D%0Aif(!this.tabPages)%20this.init()%3B%20%0D%0A%0D%0Athis.head.firstChild.appendChild(this.createTabTitle(obj))%3B%20%0D%0Athis.body.appendChild(document.getElementById(obj.panel))%3B%20%0D%0Athis.tabPages%2B%2B%3B%20%0D%0A%7D%20%0D%0A%0D%0ATabPane.prototype.createTabTitle%20%3D%20function(obj)%7B%20%0D%0Avar%20li%20%3D%20document.createElement(%22li%22)%3B%20%0D%0Ali.id%20%3D%20TabPaneConfig.getId()%3B%20%0D%0Ali.data%20%3D%20obj.panel%3B%20%0D%0Avar%20tabPane%20%3D%20this%3B%20%0D%0Ali.onclick%3Dfunction()%7BtabOnClick(tabPane%2Cli)%7D%3B%20%0D%0Ali.style.width%20%3D%20obj.width%3B%20%0D%0A%0D%0Aif(this.tabPages)%20%0D%0A%7B%20%0D%0Ali.className%3D%22%22%3B%20%0D%0Adocument.getElementById(obj.panel).style.display%3D%22none%22%3B%20%0D%0A%7D%20%0D%0Aelse%20%0D%0A%7B%20%0D%0Ali.className%3D%22hover%22%3B%20%0D%0Adocument.getElementById(obj.panel).style.display%3D%22block%22%3B%20%0D%0A%7D%20%0D%0A%0D%0Avar%20textNode%20%3D%20document.createTextNode(obj.title)%3B%20%0D%0Ali.appendChild(textNode)%3B%20%0D%0Areturn%20li%3B%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%BE%97%E5%88%B0%E6%89%80%E6%9C%89Tab%E9%A1%B5%E7%9A%84Li%E5%85%83%E7%B4%A0%20%0D%0ATabPane.prototype.getLiArr%20%3D%20function()%20%0D%0A%7B%20%0D%0A%20%20%20%20return%20this.head.firstChild.children%3B%20%0D%0A%7D%20%0D%0A%0D%0ATabPane.prototype.getAcitveLi%20%3D%20function()%20%0D%0A%7B%20%0D%0A%20%20%20%20var%20liArr%20%3D%20this.getLiArr()%3B%20%0D%0Afor(var%20i%3D0%3B%20i%3CliArr.length%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0A%20%20%20%20if(liArr%5Bi%5D.className%3D%3D%22hover%22)%20%0D%0A%20%20%20%20%7B%20%0D%0A%20%20%20%20%20%20%20%20return%20liArr%5Bi%5D%3B%20%0D%0A%20%20%20%20%7D%20%0D%0A%7D%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%88%87%E6%8D%A2%E5%88%B0%E6%8C%87%E5%AE%9A%E7%9A%84li%E5%AF%B9%E5%BA%94%E7%9A%84Tab%E9%A1%B5%20%0D%0ATabPane.prototype.changeToTab%20%3D%20function%20(li)%20%0D%0A%7B%20%0D%0Avar%20liArr%20%3D%20this.getLiArr()%3B%20%0D%0Afor(var%20i%3D0%3B%20i%3CliArr.length%3B%20i%2B%2B)%20%0D%0A%7B%20%0D%0AliArr%5Bi%5D.className%3D%22%22%3B%20%0D%0Adocument.getElementById(liArr%5Bi%5D.data).style.display%3D%22none%22%3B%20%0D%0A%7D%20%0D%0Ali.className%3D%22hover%22%3B%20%0D%0Adocument.getElementById(li.data).style.display%3D%22block%22%3B%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0A%2F%2F%E5%BE%97%E5%88%B0v%E5%9C%A8%E6%95%B0%E7%BB%84arr%E4%B8%AD%E7%9A%84%E5%BA%8F%E5%8F%B7%20%0D%0Afunction%20indexOf(arr%2Cv)%20%0D%0A%7B%20%0D%0A%20%20%20%20for(var%20i%20%3D%20arr.length%3B%20i--%20%26%26%20arr%5Bi%5D%20!%3D%3D%20v%3B)%3B%20%0D%0A%20%20%20%20return%20i%3B%20%20%20%20%20%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20onChangeTabTimer(tabPane)%20%0D%0A%7B%20%0D%0Avar%20liArr%20%3D%20tabPane.getLiArr()%3B%20%0D%0Avar%20activeLi%20%3D%20tabPane.getAcitveLi()%3B%20%0D%0Avar%20i%20%3D%20indexOf(liArr%2CactiveLi)%3B%20%0D%0Avar%20nexti%20%3D%20(i%2B1%2BliArr.length)%25liArr.length%3B%20%0D%0Avar%20nextLi%20%3D%20liArr%5Bnexti%5D%3B%20%0D%0AtabPane.changeToTab(nextLi)%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20tabOnClick(tabPane%2Cli)%20%0D%0A%7B%20%0D%0A%20%20%20%20%20tabPane.stopChangeTabTimer()%3B%20%0D%0A%20%20%20%20%20%20%20%20tabPane.changeToTab(li)%3B%20%0D%0A%7D%20%0D%0A%0D%0A%3C%2Fscript%3E"> 
<style> 
.tab { 
font-family: Verdana, Helvetica, Arial; 
font-size: 12px; 
position: relative; 
width: 100%; 
} 
.tab-border {border:1px solid;border-color: rgb(120,172,255);} 
.tab-head { 
background-color:rgb(234,242,255);; 
border:0px; 
height:23px; 
line-height:20px; 
position:relative; 
} 
.tab-head ul{ 
border:0px; 
height:23px; 
list-style:none; 
margin:0px; 
text-align:center; 
padding:0; 
position:absolute;

} 
.tab-head li{ 
border: 1px solid; 
border-color: rgb(120,172,255); 
border-left: 0; 
border-bottom: 0; 
border-top: 0; 
cursor:pointer; 
color:#416AA3; 
float:left; 
display:block; 
height:22px;!important;height:20px; 
line-height:20px; 
padding: 2px 6px 0px 6px; 
margin-top: 2px; 
margin-right: -1px; 
text-overflow:ellipsis; 
white-space:nowrap; 
overflow:hidden;

} 
.tab-head li.hover{ 
border: 1px solid rgb(120,172,255); 
border-bottom: 0; 
padding: 0px 6px 3px 6px; 
margin: 0px 1px 0px 0px; 
background: white; 
font-size: 13px; 
font-weight: bold; 
color: rgb(0,66,174); 
overflow:visible; 
} 
</style> 
<div id="rptopmain_right_middle_right"> 
             
                    <div id="divForumBoard"></div>                         
                    <div id="divForumCast" style="padding:8px;height:200px"> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>黑客零起点教程 CHM</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>什么样的项目经历会让面试官眼前一亮</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>编程学习中的一些错误认识</A></DIV> 
                    </div>                         
            <div id="divForumPanel" style="padding:8px;height:210px">                                 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>学ACM算法题有用吗？</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>黑客零起点教程 CHM</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>B实现主窗体控制副窗口的显示与隐藏</A></DIV> 
<DIV class=rp_2equalcol><A href="#" _ewebeditor_ta_href="%23" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV>                 
            </div>                          
                    <img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3Cscript%3E%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20var%20tp%20%3D%20new%20TabPane(%22divForumBoard%22%2Crandint(3%2C10))%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tp.addTabPage(%7Btitle%3A%22%E5%85%AC%E5%91%8A%22%20%2Cwidth%3A50%20%2Cpanel%3A%22divForumCast%22%7D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20tp.addTabPage(%7Btitle%3A%22%E9%9D%A2%E6%9D%BF%22%20%2Cwidth%3A50%20%2Cpanel%3A%22divForumPanel%22%7D)%3B%20%0D%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%3C%2Fscript%3E">              
             </div> 
        </div>

　　 [Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

教程首页更多教程