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

242 阅读 0 评论 160 点赞

我是靠谱客的博主糟糕玫瑰，最近开发中收集的这篇文章主要介绍javascript 定时自动切换的选项卡Tab，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

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

<title>自动切换Tab选项卡</title> 
 
<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>                          
                                  
             </div> 
        </div>

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