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

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

<title>自动切换Tab选项卡</title> <script type="text/javascript"> function randint（m,n）//产生m-n之间的随机整数 { return Math.random（）*（n-m）+m; } function IfNull（a,dv） { return typeof（a） =="undefined"？dv:a; } var TabPaneConfig = { idPrefix: "tab-panel-object-", idCounter: 0, getId: function（）{ return this.idPrefix+this.idCounter++;}, tabHeadId: "tabHead", tabHeadClass: "tab-head tab-border", tabBodyId: "tabBody", tabBodyClass: "tab-border" } function TabPane（id,changeTabInterval,isAutoChangeTab）{ this.id = id; this.height = "100%"; this.width = "100%"; this.tabPages = 0; this.head = null; this.body = null; this.changeTabInterval=IfNull（changeTabInterval,10）; this.isAutoChangeTab=IfNull（isAutoChangeTab,true）; this.changeTabTimerId = null; } TabPane.prototype.init = function（）{ var r = document.getElementById（this.id）; if（！r.style.overflow） r.style.overflow = "auto"; r.className = "tab"; //create head var div = document.createElement（"div"）; div.id = TabPaneConfig.tabHeadId; div.className = TabPaneConfig.tabHeadClass; r.appendChild（div）; this.head = div; var ul = document.createElement（"ul"）; div.appendChild（ul）; //create body div = document.createElement（"div"）; div.id = TabPaneConfig.tabBodyId; div.className = TabPaneConfig.tabBodyClass; r.appendChild（div）; this.body = div; if（this.isAutoChangeTab） {var tabPane = this;this.changeTabTimerId = setInterval（function（）{onChangeTabTimer（tabPane）;},this.changeTabInterval*1000）; } } TabPane.prototype.stopChangeTabTimer = function （） { if（this.isAutoChangeTab） { clearInterval（this.changeTabTimerId）; } } TabPane.prototype.addTabPage = function（obj） { if（！document.getElementById（obj.panel）） return; if（！this.tabPages） this.init（）; this.head.firstChild.appendChild（this.createTabTitle（obj））; this.body.appendChild（document.getElementById（obj.panel））; this.tabPages++; } TabPane.prototype.createTabTitle = function（obj）{ var li = document.createElement（"li"）; li.id = TabPaneConfig.getId（）; li.data = obj.panel; var tabPane = this; li.onclick=function（）{tabOnClick（tabPane,li）}; li.style.width = obj.width; if（this.tabPages） { li.className=""; document.getElementById（obj.panel）.style.display="none"; } else { li.className="hover"; document.getElementById（obj.panel）.style.display="block"; } var textNode = document.createTextNode（obj.title）; li.appendChild（textNode）; return li; } //得到所有Tab页的Li元素 TabPane.prototype.getLiArr = function（） { return this.head.firstChild.children; } TabPane.prototype.getAcitveLi = function（） { var liArr = this.getLiArr（）; for（var i=0; i<liArr.length; i++） { if（liArr[i].className=="hover"） { return liArr[i]; } } } //切换到指定的li对应的Tab页 TabPane.prototype.changeToTab = function （li） { var liArr = this.getLiArr（）; for（var i=0; i<liArr.length; i++） { liArr[i].className=""; document.getElementById（liArr[i].data）.style.display="none"; } li.className="hover"; document.getElementById（li.data）.style.display="block"; } //得到v在数组arr中的序号 function indexOf（arr,v） { for（var i = arr.length; i-- && arr[i] ！== v;）; return i;} function onChangeTabTimer（tabPane） { var liArr = tabPane.getLiArr（）; var activeLi = tabPane.getAcitveLi（）; var i = indexOf（liArr,activeLi）; var nexti = （i+1+liArr.length）%liArr.length; var nextLi = liArr[nexti]; tabPane.changeToTab（nextLi）; } function tabOnClick（tabPane,li） {tabPane.stopChangeTabTimer（）; tabPane.changeToTab（li）; } </script> <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> 黑客零起点教程 CHM 可以加密及解密的VB屏幕键盘组件 什么样的项目经历会让面试官眼前一亮 超级j2me飞行游戏疯狂雷电源代码 可以加密及解密的VB屏幕键盘组件 编程学习中的一些错误认识 Delphi多文档几何图形绘制及编辑程序 学ACM算法题有用吗？ 黑客零起点教程 CHM 超级j2me飞行游戏疯狂雷电源代码 B实现主窗体控制副窗口的显示与隐藏 Delphi多文档几何图形绘制及编辑程序 <script>var tp = new TabPane（"divForumBoard",randint（3,10））;tp.addTabPage（{title:"公告" ,width:50 ,panel:"divForumCast"}）;tp.addTabPage（{title:"面板" ,width:50 ,panel:"divForumPanel"}）; </script>

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