请问在页面上怎样实现ｔａｂ控件的效果？

用表格和DIV模仿：
<html>
<head>
<style>
td.act{border:2 solid black; border-bottom:0}
td.dis{border:0;border-bottom:2 solid black}
</style>
</head>
<body>
<table width=500 height=200 bgcolor=#eeeeee cellspacing=0 cellpadding=0>
<tr>
<td height=20><table width=100% style="text-align:center"  cellspacing=0 cellpadding=0>
<tr>
<td id=tab1 value=1 onclick="toggle(this)" class="act">red</td>
<td id=tab2 value=2 onclick="toggle(this)" class="dis">blue</td>
<td id=tab3 value=3 onclick="toggle(this)" class="dis">green</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="background-color:#eeeeee">
<div id=div1 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#f00;display:block">
 11111111 111111111 11111111111</div>
<div id=div2 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#00f;display:none">
 222222 22222222 2222222222</div>
<div id=div3 style="position:relative;top:0;left:0;width:100%;height:100%;border:2 solid black; border-top:0;color:#0f0;display:none">
33333333 33333333 3333333</div>
</td>
</tr>
</table>
<script language="JavaScript">
<!--
function toggle(x){
 for(var i=1; i<=3; i++){
  var e=eval("div"+ i);
  var y=eval("tab"+i);
  if(i==x.value){
   e.style.display="block";
   y.className="act";
  }else {
  e.style.display="none";
  y.className="dis";
  }
 }
}
//-->
</script>
</body>
</html>