本教程只介绍运用tbody制作选项卡的方法，首先来看一个实例：
table{ font-size:9pt}
.h1{ background:#d3d6d9;border-top:1px outset
#d3d6d9;border-left:1px outset #d3d6d9;border-right:1px outset
#d3d6d9;border-bottom:0px }
.h2{ background:menu;border:1px outset menu }
.h3{ background:white;border-bottom:1px outset #d3d6d9}
#main{ background:#d3d6d9;border-left:1px outset
#d3d6d9;border-right:1px outset #d3d6d9;border-bottom:1px outset
#d3d6d9}
</style>
<script>
function sel(n){
var ye=document.all[‘handle’];
for(i=0;i<ye.cells.length-1;i++){
ye.cells[i].className=”h2″;
ye.cells[n].className=”h1″;
}
for(i=0;i<yexj00.tBodies.length;i++){
yexj00.tBodies[i].style.display=’none’;
yexj00.tBodies[n].style.display=’block’;
}
}
</script>
<table cellspacing=0 cellpadding=0 width=”350″
height=”18″ border=0>
<tbody>
<tr
align=center><td width=80 height=20
>昵称</td><td
width=80
>QQ</td><td
width=80
>主页</td><td
</td>
</tbody>
</table>
<table cellspacing=0 cellpadding=0 width=”350″
height=”150″>
<tbody>
<tr
align=center><td>yexj00</td></tr>
</tbody>
<tbody
style=”display:none”>
<tr
align=center><td>26003083</td></tr>
</tbody>
<tbody
style=”display:none”>
<tr
align=center><td>http://yexj00.5dm.cn</td></tr>
</tbody>
</table>
.h1{ background:#d3d6d9;border-top:1px outset #d3d6d9;border-left:1px outset #d3d6d9;border-right:1px outset #d3d6d9;border-bottom:0px }
.h2{ background:menu;border:1px outset menu }
.h3{ background:white;border-bottom:1px outset #d3d6d9}
#main{ background:#d3d6d9;border-left:1px outset #d3d6d9;border-right:1px outset #d3d6d9;border-bottom:1px outset #d3d6d9}
h1是默认选中的那个标题的样式，一般选第一个标题。
h2是未选中的标题的样式。
h3是当标题的总宽度小于内容主体的总宽度时要在后面添加的单元格的样式(设置为只显示下边框)。
main就是内容主体的样式，这里设置成上边框为0px(没有设定border-top就是说它的值为0)，如果border-top不为0,那内容主体的上边框将与标题的下边框叠加，效果就不好了，可以也是可以的。
2. 怎样处理事件?
思路是这样的：单击哪个标题，就把所有标题样式设为h2，再回过来把当前标题的样式设为h1；然后内容主体也差不多，先隐藏所有的内容，然后再回过来显示当前标题相对应的内容主体。
有了这个思路接下来就游刃有余了，根据以前学过的脚本就可以知道：
标题所在的table是handle，因为这个table每列都只有一个单元格，这就好办了，直接对这个handle的cells集合进行遍历。
而内容主体默认除第一个tbody显示之外其它的display都设成none；于是我们可以对main这个table的tBodies集合进行遍历。
还少一个什么呢，对了，就是当前选中的标题样式要更改，对应的内容要更改，这个标题或当前标题对应的内容的索引该怎么传到函数中呢，当然了，有朋友马上想到放在函数名后面的参数里进行传值，就是例中的n。
3. 为什么
ye.cells[i].className=”h2″;
ye.cells[n].className=”h1″;
}
这里for循环的条件中ye.cells.length要减1呢?别忘了标题栏的总宽度小于内容主体的总宽度，所以最后一个单元格是不参与任何过程的。