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

当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript 定时自动切换的选项卡Tab

Javascript: js支持158、159开头的手机号的验证; javascript学习网址备忘; JScript的条件编译; [原创]站长必须要知道的javascript广告代码; js实现的点击超链显示隐藏层; JCalendar 日历控件 v1.0 beta[兼容IE&Firefox] 有文档和例子; JavaScript 不只是脚本; 把JS与CSS写在同一个文件里的书写方法; Javascript & DHTML 实例编程（教程）基础知识; Javascript & DHTML 实例编程（教程）DOM基础和基本API; javascript实现的一个图片转移效果; 用js实现键盘方向键翻页功能的代码; js实现DIV的一些简单控制; 用CSS+JS实现的进度条效果效果; 爱恋千雪-US-AscII加密解密工具（网页加密）下载; 用javascript实现始终保持打开同一个子窗口以及关闭父窗口同时自动关闭所有子窗口; 非常不错的页面特效建议大家看下; javascript Zifa FormValid 0.1表单验证代码打包下载; 实现javascript的延期执行或者重复执行的两个函数; 推荐一个不错的图片浏览效果

No. « ‹ 69 70 71 72 › »

技术文章搜索

关键字

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

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2010-01-10 浏览: 486 ::

收藏到网摘: n/a

JS 仿Flash动画放大/缩小容器图片友情链接滚动横向,带控制按钮

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);
//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>
<div id="rptopmain_right_middle_right"> <div id="divForumBoard"></div> <div id="divForumCast" style="padding:8px;height:200px">
<DIV class=rp_2equalcol><A href="#" target=_blank><a href="http://www.ruanchen.com/" style="color: #000">黑客</a>零起点教程 CHM</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>什么样的项目经历会让面试官眼前一亮</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>可以加密及解密的VB屏幕键盘组件</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>编程学习中的一些错误认识</A></DIV> </div> <div id="divForumPanel" style="padding:8px;height:210px">
<DIV class=rp_2equalcol><A href="#" target=_blank>Delphi多文档几何图形绘制及编辑程序</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>学ACM算法题有用吗？</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank><a href="http://www.ruanchen.com/" style="color: #000">黑客</a>零起点教程 CHM</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>超级j2me飞行游戏疯狂雷电源代码</A></DIV>
<DIV class=rp_2equalcol><A href="#" target=_blank>B实现主窗体控制副窗口的显示与隐藏</A></DIV>
<DIV 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 仿Flash动画放大/缩小容器图片友情链接滚动横向,带控制按钮

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

评论 (0) All