定时自动切换的选项卡Tab

2024-09-05 12:20:28

字体：大中小

来源：转载

供稿：网友

JavaScript配合CSS制作一个能自动切换的网页选项卡,每隔一段时间,它就自动切换选项卡列表和标题,时间自设,这里要注意,用于产生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);    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><div id="rptopmain_right_middle_right">								<div id="divForumBoard"></div>						 					<div id="divForumCast" style="padding:8px;height:200px">        <DIV class=rp_2equalcol>黑客零起点教程 CHM</DIV><DIV class=rp_2equalcol>可以加密及解密的VB屏幕键盘组件</DIV><DIV class=rp_2equalcol>什么样的项目经历会让面试官眼前一亮</DIV><DIV class=rp_2equalcol>超级j2me飞行游戏疯狂雷电源代码</DIV><DIV class=rp_2equalcol>可以加密及解密的VB屏幕键盘组件</DIV><DIV class=rp_2equalcol>编程学习中的一些错误认识</DIV>					</div>									<div id="divForumPanel" style="padding:8px;height:210px">								<DIV class=rp_2equalcol>Delphi多文档几何图形绘制及编辑程序</DIV><DIV class=rp_2equalcol>学ACM算法题有用吗？</DIV><DIV class=rp_2equalcol>黑客零起点教程 CHM</DIV><DIV class=rp_2equalcol>超级j2me飞行游戏疯狂雷电源代码</DIV><DIV class=rp_2equalcol>B实现主窗体控制副窗口的显示与隐藏</DIV><DIV class=rp_2equalcol>Delphi多文档几何图形绘制及编辑程序</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>

上一篇：CSS实现折叠的菜单

下一篇：滑动菜单，Tab，选项卡，横向，竖向都有