JavaScript Tab切换功能增强版实现

作者：页面旅途时间：2026-10-22 15:29:17浏览：220

本文介绍了一个基于原生JavaScript的Tab标签页切换功能增强版实现。通过封装DOM获取函数和状态管理逻辑，实现了多标签页内容的动态显示与隐藏，并优化了旧版浏览器的兼容性处理，适用于需要轻量级交互效果的前端场景。

<style> body {     font-family: Arial,"宋体";     font-size:9pt; } td { font-size:12px;; } .mousehand{     cursor:hand; } .titletable{     padding-left:5px;     background-color:#E9E9E9; }     table.TabBarLevel1{ } table.TabBarLevel1 td{ border:1px solid #CCCCCC; height:20px; background-color:#E1E1E1; } table.TabBarLevel1 td.Selected{ border-bottom-width:0px; background-color:#ffffff; } table.TabBarLevel1 td.Black{ border-left-width:0px; border-top-width:0px; border-right-width:0px; background-color:#FFFFFF; } table.Content{ border-left:1px solid #CCCCCC; border-right:1px solid #CCCCCC; border-bottom:1px solid #CCCCCC; } </style> <table width="600" border="0" cellspacing="0" cellpadding="0"> <tr>     <td><table width="100%" border="0" cellspacing="0" cellpadding="0" class="TabBarLevel1" id="TabPage1">       <tr align="center">         <td width="130" id="imageTab1" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab1','心开风神','image');">热门图片</td>         <td width="7" class="Black">&nbsp;</td>         <td width="80" id="imageTab2" valign="middle" class="mousehand" onclick="javascript:switchTab('TabPage1','imageTab2','子虚乌有','image');">波希米亚</td>         <td width="7" class="Black">&nbsp;</td>         <td width="80" id="imageTab3" valign="middle" class="Selected mousehand" onclick="javascript:switchTab('TabPage1','imageTab3','孤零飘客','image');">红色黑客</td>         <td width="7" class="Black">&nbsp;</td>         <td width="" align="right" class="Black">本站&nbsp;&nbsp;</td>       </tr>     </table>       <table width="100%" border="0" cellpadding="0" cellspacing="0" class="Content">         <tr>           <td height="110"><div id="divimagelist_all">&nbsp;正在加载...</div></td>         </tr>       </table></td> </tr> </table>

Tab切换功能概述与注意事项

注意：引入外部JavaScript文件后，可能需要刷新页面才能执行相关脚本。

功能增强说明

在此基础之上，我对内容控制效果进行了增强和优化。

核心代码实现

具体实现代码如下：

<script type="text/javascript">
function $(objName)
{ 
if(document.getElementById)
    { 
return document.getElementById(objName );
    } 
else if(document.layers)
    { 
return eval("document.layers['" + objName +"']");
    } 
else
    { 
return eval('document.all.' + objName);
    } 
} 
function switchTab(tabpage,tabid,action,type){
var oItem = $(tabpage);
for(var i=1;i<6;i++){
var x = $(type + 'Tab' + i);
//alert(x);
x.className = "mousehand";
//var y = x.getElementsByTagName('a');
//y[0].style.color="#333333";
  }     
$(tabid).className = "Selected";
//gethotimagelist(type+'_'+action);
closeall(action);
$(action).style.display="block";
} 
function closeall(action){
for(var ii=1; ii<5; ii++){
var noclose;
noclose="div"+ii;
if (noclose!=action){
$(noclose).style.display="none";
} 
} 
} 
</script>

作者最新文章

JS监听滚动事件：回到顶部按钮的显示与隐藏逻辑

2026-11-05 16:19:37

JavaScript怎么读写LocalStorage与SessionStorage

2026-11-05 15:40:11

anime.js 与 GSAP 对比：轻量级项目该怎么选择动画库

2026-11-05 11:24:55

flv.js 与 hls.js 在直播场景下的选型对比

2026-11-05 08:18:52

JavaScript能做什么？前端开发中的作用与应用场景解析

2026-11-04 23:17:54