首页 / JAVASCRIPT / javascript 定时自动切换的选项卡Tab

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 定时自动切换的选项卡Tab，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含4158字，纯文字阅读大概需要6分钟。

内容图文

这里要注意,用于产生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需刷新才能执行]

内容总结

以上是互联网集市为您收集整理的javascript 定时自动切换的选项卡Tab全部内容，希望文章能够帮你解决javascript 定时自动切换的选项卡Tab所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/372768.html

来源：【匿名】

【上一篇】图片友情链接滚动横向,带控制按钮【下一篇】javascript 怎么调用php方法

更多 ►

【javascript 定时自动切换的选项卡Tab】教程文章相关的互联网学习教程文章

javascript 一个页面多个tab选项卡效果

<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>javascript 一个页面多个tab选项卡效果</title> <script> var tab=function(id,event){ var oDiv=document.getElementById(id); var oBtn=oDiv.getElementsByTagName("li"); var oBox=oDiv.getElementsByTagName("div"); for(var i=0;i<oBtn.length;i++){ (function(index){ oBtn[i].addEventListener(event,function(){ for...

javascript选项卡切换样式【代码】

HTML代码　　<ul class="touzi_xuan1" id="qixian">　　　　<li>****： </li>　　　　<li style="width: 18px;"> </li>　　　　<li><a href="javascript:void(0);" onclick="searchPersonZi(this);" class="on">****</a></li>　　　　<li><a href="javascript:void(0);" onclick="searchPersonZi(this);">****</a></li>　　</ul>javascript代码　　function searchPersonZi(obj) {　　　　jQuery(obj).parent().parent().find("a")...

用JavaScript实现选项卡功能【代码】【图】

--做更好的自己? 用js实现选项卡功能我们在一些常见的网站中经常看到将很大的内容进行叠加显示，这样就会节省很大的版面，而显示的内容更加丰富，如下淘宝部分截图：1、仿照以上布局，一个标题标签（我们给它设计五个选项卡标签：公告、规则、论坛、安全、公益，相应的就会有五个一样大小的内容盒子来设计内容）一个内容标签。 <div id="title"><h3 >公告</h3><h3 >规则</h3><h3 >论坛</h3><h3 >安全</h3><h3 >公益...

普通选项卡+自动播放功能+向前/向后按钮原生js

今天做了幻灯片，主要功能包括：普通选项卡，向前/向后播放按钮，向前？向后播放功能,自动播放功能要实现简单选项卡功能是没有问题的，但是添加功能就出现各种各样的问题了遇到的问题：1 下标问题 2普通选项卡与向前/向后功能结合的时候冲突，可以向前/向后播放，但是再想实现普通选项卡就出问题了3 添加向前/向后按钮后，html布局下移4 添加向前/向后按钮的时候，我用img标签，显然这个不适用，不能很好的调节垂直居中5 当鼠标放在...

js判断浏览器窗口（选项卡）的关闭与刷新(原版)

今日项目遇到一个问题，有一个功能会在浏览器的主窗口中新开一个窗口，然后业务要求：关闭新窗口的时候往后端发个请求，刷新的时候不发送。知道有个onbeforeunload事件是用于捕获关闭浏览器事件（包括刷新）的，但刷新也会走此方法，所以行不通，于是就网上找了找资料，网上回答的最多的大致是这样的window.onbeforeunload = function() { //鼠标相对于用户屏幕的水平位置 - 窗口左上角相对于屏幕左上角的水平位置 = 鼠标在当前...

原生js面向对象编程-选项卡(点击)【代码】

<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"><title>原生js面向对象选项卡(点击)</title><style>#div1 div{width:400px;height:300px;border:1px solid #ccc;overflow: hidden;display: none;margin: 15px 0;}#div1 input{color: #fff;width:100px;height:40px;background: darkseagreen;border:none;font-size: 14px;letter-spacing: 5px;}#div1 p{font-size: 20px;line-height: 24px;text-align: center;color:...

jquery实现经典的淡入淡出选项卡效果代码_jquery【图】

本文实例讲述了jquery实现经典的淡入淡出选项卡效果代码。分享给大家供大家参考。具体如下：这是一款经典的Tab选项卡代码,带有淡入淡出效果,jquery插件实现,希望大家能够喜欢,界面未做美化.感兴趣的朋友可以优化一下运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-jd-fade-in-out-style-tab-codes/ 具体代码如下：经典选项卡.tab{text-align:left;width:500px;border:#ccc 1px solid;margin:100px;}...

javascript – jQuery：如何选择选项卡中显示的输入字段【代码】

我遇到了一种情况,我想在其他导航选项卡中选择未隐藏和可见的输入元素. 我使用以下代码来选择输入字段$("input[type!=hidden]").each(function(){......});但是,它选择使用jQuery.hide()函数隐藏的输入字段,即visibility none.在这里,我隐藏了输入元素的父母,即如果我尝试再次使用visibility属性进行过滤,jQuery会将非活动(非当前)导航选项卡中的输入元素视为不可见.因此,未选择非活动选项卡的输入字段.$("input[type!=hidden]")....

js实现仿Windows风格选项卡和按钮效果实例

本文实例讲述了js实现仿Windows风格选项卡和按钮效果的方法。分享给大家供大家参考。具体实现方法如下： <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <style type="text/css"> <!-- body{font-family: MS Shell Dlg, 宋体, Tahoma;font-size: 12px;background-color: #336699;color:#000000; } td, div, input, textarea{font-family: MS Shell Dlg, 宋体, Tahoma;font-size: 12px;curs...

javascript-选项卡处于非活动状态/用于录制时有背景时,画布不会重新绘制(WebGL)【代码】

我正在构建在线Web应用程序,该应用程序在画布上呈现视频,然后使用canvas.captureStream()和mediaRecorder记录画布.问题在于,当用户切换选项卡或最小化窗口时,画布会冻结.我使用了webWorkerSetInterval(Hacktimer.js)后,动画一直保持运行状态.根据Chrome,他们尚未提供解决方案https://bugs.chromium.org/p/chromium/issues/detail?id=639105. 有人可以建议解决方法吗？我尝试了不允许最小化但未成功的新窗口.切换窗口时录制不会停止...

jQuery超简单选项卡完整实例【图】

本文实例讲述了jQuery实现的超简单选项卡效果。分享给大家供大家参考。具体如下：这是一款基于jQuery的选项卡示例，比较实用的一个实例，希望通过本文让大家掌握如何使用jQuery创建一个选项卡标签，这是目前WEB前端设计比较流行的一款功能。运行效果截图如下：在线演示地址如下： http://demo.jb51.net/js/2015/jquery-simple-nav-cha-demo/ 具体代码如下： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "ht...

layui选项卡效果实现代码

本文实例为大家分享了layui选项卡的具体代码，供大家参考，具体内容如下 <!DOCTYPE html> <html><head><meta charset="UTF-8"><title>选项卡</title><link rel="stylesheet" href="layui/css/layui.css"></head><body> <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;"><legend>默认风格的Tab</legend> </fieldset><div class="layui-tab"><ul class="layui-tab-title"><li class="layui-this">网...

两种jQuery实现选项卡功能的方法【图】

实现选项卡有很多方法，但是万变不离其宗，思路很重要，本文主要介绍了jQuery两种方法写选项卡的实例，具有很好的参考价值。下面跟着小编一起来看下吧，希望能帮助到大家。效果图：代码如下：<!DOCTYPE html> <html><head><meta charset="UTF-8"><script src="http://code.jquery.com/jquery-1.8.0.min.js"></script><title>JQuery 源码分析</title><style>#p1 p{width: 200px;height: 200px;border: 1px solid #FF0000;display: n...

关于JavaScript插件Tab选项卡效果分享【图】

研究了一下JavaScript插件的写法，今天就将自己写的一个小插件记录下来。本文主要就为大家详细介绍了JavaScript插件Tab选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能帮助到大家。本文介绍了此款插件的基本用法，实现的功能以及代码。首先，来看看最终效果：这是一款普通的Tab选项卡插件，下面来讲讲它实现了哪些功能：1、支持不同鼠标事件触发选项卡切换效果； 2、支持不同切换效果的配置，例如淡入淡出...

在zTree中如何实现交互选项卡

下面我就为大家分享一篇zTree树形菜单交互选项卡效果的实现方法，具有很好的参考价值，希望对大家有所帮助。1、添加自定义属性 page2、为 ztree 每个树形节点，添加点击事件<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>ztree树形菜单的使用</title><script type="text/javascript" src="../js/jquery-1.8.3.js"></script><link id="easyuiTheme" rel="stylesh...

首页 / JAVASCRIPT / javascript 定时自动切换的选项卡Tab

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

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript 定时自动切换的选项卡Tab】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

TAB - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程