JavaScript 实现自动定时切换的网页选项卡
作者:拾光时间:2026-10-29 15:23:18浏览:174
本文介绍一种简洁的 JavaScript 网页选项卡实现方案,支持自动定时切换内容。通过配置变量设定切换时间与显示内容,可提升页面交互体验。文章提供在线演示地址及完整代码示例,供开发者参考使用。
JavaScript 自动切换选项卡实现
本文介绍一种利用 JavaScript 实现的简洁网页选项卡功能,该功能支持自动定时切换内容。
与普通选项卡不同,此组件具备自动切换特性。用户只需在变量中配置选项卡内容、切换间隔时间等参数,即可启动自动轮播。若后续能增加鼠标交互响应,体验将更加完善。
运行效果如图所示:

在线演示地址如下:
http://demo.jb51.net/js/2015/js-auto-ds-web-menu-demo/
具体代码如下:
<html>
<head>
<title>自动切换的选项卡</title>
<style>
.tab{width:100px;height:25px;background-color:#ccc;margin:0;padding:0;
border-right:1px solid #666;}
.tab_on{width:100px;height:25px;background-color:#eee;margin:0;padding:0;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-left:1px solid #666;}
#show{
width:200px;
height:100px;
background-color:#eee;
border-bottom:1px solid #666;
border-top:1px solid #666;
border-right:1px solid #666;
line-height:30px;
}
</style>
<script language="javascript" type="text/javascript">
<!--
var n=1;
var time=1000;
var strArr=new Array();
strArr[0]="我们提供";
strArr[1]="高质量脚本下载";
strArr[2]="欢迎光临小站";
strArr[3]="精品网页特效";
function init(){document.getElementById("show").innerHTML = strArr[0];}
function show(){
n=n>strArr.length?1:n;//如果n>数组长度 则重新赋值为1,以便程序循环
for(i=1;i<(strArr.length+1);i++){//这里for用来改变当前tab的classname
if(i==n) document.getElementById("tab_"+i).className = "tab_on";
else document.getElementById("tab_"+i).className = "tab";
}
document.getElementById("show").innerHTML = strArr[n-1];//现实数据
n++;
}
setInterval("show()",time);//隔一秒执行一次
//-->
</script>
</head>
<body onload="init()">
<table border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#eeeeee">
<tr>
<td align="right">
<div id="tab_1" class="tab_on">ASP</div>
<div id="tab_2" class="tab" >PHP</div>
<div id="tab_3" class="tab" >JSP</div>
<div id="tab_4" class="tab">JAVA</div>
</td>
<td bgcolor="#eeeeee">
<div id="show"></div>
</td>
</tr>
</table>
</body>
</html>
希望本文所述的 JavaScript 程序设计示例对读者有所帮助。
作者最新文章
JS处理含Emoji或中文的字符串转数组乱码问题
2026-11-05 16:12:28
JS怎么使用展开运算符合并对象
2026-11-05 14:42:18
ES6+环境下判断JS对象为空的简洁写法
2026-11-05 12:12:23
怎么通过replacer函数自定义JS中JSON的格式化输出
2026-11-05 11:19:44
JS正则表达式基础:字面量与RegExp构造函数的区别及常用元字符
2026-11-05 11:16:58
