javascript 定時自動切換的選項卡Tab

2019-11-21 01:04:27

字體：大中小

來源：轉載

供稿：網友

這里要注意,用于產生changeTabInterval的隨機數(shù)，防止頁面上TabPane過多，如果設置的changeTabInterval都一樣的話會產生整齊劃一的切換的效果，不美觀.

<title>自動切換Tab選項卡</title> <script type="text/javascript"> function randint(m,n)//產生m-n之間的隨機整數(shù) {     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在數(shù)組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> <div   class="iwvjtn8m0"   id="rptopmain_right_middle_right">                                  <div   class="iwvjtn8m0"   id="divForumBoard"></div>                                             <div   class="iwvjtn8m0"   id="divForumCast" style="padding:8px;height:200px"> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>黑客零起點教程 CHM</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕鍵盤組件</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>什么樣的項目經歷會讓面試官眼前一亮</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>超級j2me飛行游戲瘋狂雷電源代碼</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕鍵盤組件</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>編程學習中的一些錯誤認識</A></DIV>                     </div>                                     <div   class="iwvjtn8m0"   id="divForumPanel" style="padding:8px;height:210px">                                 <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>Delphi多文檔幾何圖形繪制及編輯程序</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>學ACM算法題有用嗎？</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>黑客零起點教程 CHM</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>超級j2me飛行游戲瘋狂雷電源代碼</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>B實現(xiàn)主窗體控制副窗口的顯示與隱藏</A></DIV> <div   id="iwvjtn8m0"   class=rp_2equalcol><A href="#" target=_blank>Delphi多文檔幾何圖形繪制及編輯程序</A></DIV>                             </div>                                              <script>                  var tp = new TabPane("divForumBoard",randint(3,10));                  tp.addTabPage({title:"公告" ,width:50 ,panel:"divForumCast"});                  tp.addTabPage({title:"面板" ,width:50 ,panel:"divForumPanel"});                     </script>                           </div>         </div>

[Ctrl+A 全選注:如需引入外部Js需刷新才能執(zhí)行]

上一篇：圖片友情鏈接滾動橫向,帶控制按鈕

下一篇：JS 仿Flash動畫放大/縮小容器