本文介绍一种基于HTML Table结构实现的极简JavaScript选项卡效果。该方案利用表格特性进行布局与样式控制，相比DIV结构代码更为精简。文章提供了完整的HTML、CSS及JS代码示例，并附带运行效果截图与在线演示链接，适合习惯使用表格布局的开发者参考。
Table选项卡实现概述
本文分享一个基于JavaScript实现的极简Table选项卡功能实例，供读者参考使用。
这是一个结构最简单的Table选项卡组件，其核心基于HTML表格构建，而非传统的DIV布局。对于习惯使用表格进行页面排版的开发者而言，这种实现方式可能更具亲和力。尽管部分样式修饰（如表格边框、背景色等）仍沿用Table特性，但作者认为在代码精简度上，Table方案往往优于DIV结构。
具体运行效果如下图所示：
如需查看实际运行效果，可访问以下在线演示地址：
http://demo.jb51.net/js/2015/js-z-simple-tab-nav-menu-codes/
核心代码实现
完整的实现代码如下：
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>选项卡</title>
<style type="text/css">
<!--
.menu1 {
font-size: 14px;
color: #FFFFFF;
text-decoration: none;
background-color: skyblue;
cursor:hand;
}
.menu2 {
font-size: 14px;
color: #990000;
text-decoration: none;
background-color: #FFFFFF;
cursor:hand;
}-->
</style>
<script language="JavaScript">
function tabit(id,cid) {
tab1.className="menu2";
tab2.className="menu2";
id.className="menu1";
ctab1.style.display="none";
ctab2.style.display="none";
cid.style.display="block";
}
</script>
</head>
<body onload="tabit(tab1,ctab1)">
<table width="400" height="169" border="0" cellpadding="3" cellspacing="1" bgcolor="#990000">
<tr>
<td height="20" class="menu1" id="tab1" onmouseover="tabit(tab1,ctab1)">今日焦点</td>
<td height="20" class="menu2" id="tab2" onmouseover="tabit(tab2,ctab2)">一周热门</td>
</tr>
<tr id="ctab1" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">今日焦点的内容</td>
</tr>
<tr id="ctab2" style="display:none">
<td height="100" colspan="2" bgcolor="#FFFFFF">一周热门的内容</td>
</tr>
</table>
</body>
</html>希望上述内容能为各位的JavaScript编程工作提供有益的帮助。