如何制作类似Windows系统中的选项卡的效果
解决思路：
选项卡的特点是在单击标签时自动切换显示相应的选项卡，这里就要用到显示与隐藏的动作，而且单击的标签和显示的选项卡还有对应的关系，这种对应关系通过 cells和tBodies两个集合的关联来实现。
具体步骤：
1.插入表格宽为340像素的2行1列表格，作为外框。
<table width="340" border="0" cellpadding="0" cellspacing="0">
<tr><td> </td></tr>
<tr><td> </td></tr>
</table>
2.在第一行的单元格中插入一个1行7列的表格，并写上标签名。(第一行的七个单元格作为标签，其余七行分别对应着单击标签切换到的七个选项卡)
<table width="340" border="0" cellpadding="0" cellspacing="0">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>常规</td>
<td>安全</td>
<td>隐私</td>
<td>内容</td>
<td>连接</td>
<td>程序</td>
<td>高级</td>
</tr>
</table></td></tr>
<tr><td> </td></tr>
</table>
3.在第二行的单元格中插入一个7行1列的表格，并按行用 TBODY标签将表格分为7级。每组按顺序分别对应着相应标签的选项卡。
<table width="340" border="0" cellpadding="0" cellspacing="0">
<tr><td><table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>常规</td>
<td>安全</td>
<td>隐私</td>
<td>内容</td>
<td>连接</td>
<td>程序</td>
<td>高级</td>
</tr>
</table></td></tr>
<tr><td> <table width="100%" border="1" cellspacing="0" cellpadding="0" borderColor="#71B7A5">
<tbody>
<tr>
<td height="150">主页<br>Internet临时文件<br>历史记录</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="50">请为不同区域的 Web内容指定安全设置<br>该区域的安全级别</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="100">设置<br>网站</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="250">分级审查<br>证书<br>个人信息</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">拨号和虚拟专用网络设置<br>局域网(LAN)设置</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">Internet 程序<br>重置 Web 设置<br>检查 Internet Explorer 是否为默认的浏览器</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">设置<br>还原为默认值</td>
</tr>
</tbody>
</td></tr>
</table>
4.定义CSS并设置默认显示的选项卡，使效果更加逼真。
<style>
td{font:normal 12px Tahoma}
#content tbody{display:none}
.item{background:url(images/item.gif) no-repeat bottom;width:51px;height:28px;text-align:center}
.c_item{background:url(images/citem.gif) no-repeat bottom;width:56px;text-align:center;vertical-align:top;padding-top:3px}
</style>
<table width="340" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr id="items">
<td class="c_item">常规</td>
<td class="item">安全</td>
<td class="item">隐私</td>
<td class="item">内容</td>
<td class="item">连接</td>
<td class="item">程序</td>
<td class="item">高级</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="content" background="images/bg.gif" borderColor="#71B7A5">
<tbody style="display:block">
<tr>
<td height="150">主页<br>Internet临时文件<br>历史记录</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="50">请为不同区域的 Web内容指定安全设置<br>该区域的安全级别</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="100">设置<br>网站</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="250">分级审查<br>证书<br>个人信息</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">拨号和虚拟专用网络设置<br>局域网(LAN)设置</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">Internet 程序<br>重置 Web 设置<br>检查 Internet Explorer 是否为默认的浏览器</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">设置<br>还原为默认值</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
5.加入JavaScript脚本控制，完整代码如下：
<style>
td{font:normal 12px Tahoma}
#content tbody{display:none}
.item{background:url(images/item.gif) no-repeat bottom;width:51px;height:28px;text-align:center}
.c_item{background:url(images/citem.gif) no-repeat bottom;width:56px;text-align:center;vertical-align:top;padding-top:3px}
</style>
<script>
function switchit(){
begin=new Date() //程序开始执行的时间，测试用的，可以删掉
obj=event.srcElement
if(obj.tagName!="TD") //事件发生的对象不是单元格时退出
return
index=obj.cellIndex //单元格的在行中的索引值
//遍历该行所有单元格，并设置className为item
for(var i=0;i<items.cells.length;i++)
items.cells[i].className="item"
//把事件发生的单元格className设为c_item
obj.className="c_item"
//遍历content表格的所有tbody
for(i=0;i<content.tBodies.length;i++)
content.tBodies[i].style.display="none"
//设置所有tbody为不可见
//设置事件事件发生的单元格对应的tbody块可见
content.tBodies[index].style.display="block"
//在状态栏显示程序执行所花时间，测试用的，可以删掉
window.status="程序执行耗时："+(new Date()-begin)+"毫秒"
}
</script>
<table width="340" border="0" cellpadding="0" cellspacing="0">
<tr><td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr onClick="switchit()" id="items">
<td class="c_item">常规</td>
<td class="item">安全</td>
<td class="item">隐私</td>
<td class="item">内容</td>
<td class="item">连接</td>
<td class="item">程序</td>
<td class="item">高级</td>
</tr>
</table></td>
</tr>
<tr>
<td>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="content" background="images/bg.gif" borderColor="#71B7A5">
<tbody style="display:block">
<tr>
<td height="150">主页<br>Internet临时文件<br>历史记录</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="50">请为不同区域的 Web内容指定安全设置<br>该区域的安全级别</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="100">设置<br>网站</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="250">分级审查<br>证书<br>个人信息</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">拨号和虚拟专用网络设置<br>局域网(LAN)设置</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">Internet 程序<br>重置 Web 设置<br>检查 Internet Explorer 是否为默认的浏览器</td>
</tr>
</tbody>
<tbody>
<tr>
<td height="200">设置<br>还原为默认值</td>
</tr>
</tbody>
</table></td>
</tr>
</table>
注意：先准备好三个图片作背景用，如图1.2.39所示。
图1.2.39 本例所用到的三个背景图片
特别提示
为了接近系统中的选项卡(图 1.2.40)，用了三个图片作为背景(图 1.2.39)，所以在单击标签时的切换比较慢，具体消耗时间可以看代码运行时的状态栏提示。代码运行效果如图 1.2.41、图1.2.42所示。
图 1.2.41 Windows系统中的选项卡
图1.2.42 模拟的 Windows 系统选项卡效果
特别说明
本例主要是通过所单击标签(单元格)的cellIndex属性值，来设置表格的tBodies集合中相应项的显示与隐藏。
tBodies 获取表格中所有 tBody 对象的集合。此集合中的对象以 HTML 源顺序排列。 
