怎样才能实现在一个页面进行多个标签的切换

<html>
<head>
<title> New Document </title>
<style>
td      { font-family: 宋体; font-size: 9pt;}
.ooib { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;}
.ooih td { border-width: 1px; padding: 0 5; }
.ooihj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand}
.ooihs { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand}
.ooihx { border-style: none none solid; border-color: #CC3333; }</style>
<style>
td      { font-family: 宋体; font-size: 9pt;}
.ooic { border-width: 1px; border-style: none solid solid; border-color: #CC3333; background-color: #E4E5EE;}
.ooil td { border-width: 1px; padding: 0 5; }
.ooilj { color: #CC3333; background-color: #E4E5EE; border-style: solid solid none; border-color: #CC3333; cursor: hand}
.ooils { color: #6600CC; background-color: #ccccFF; border-style: solid; border-color: #6600CC #6600CC #CC3333; cursor: hand}
.ooilx { border-style: none none solid; border-color: #CC3333; }</style>
<script language="JavaScript">
function ghbq(td)
{
var tr = td.parentElement.cells;
var ob = obody.rows;
for(var ii=0; ii<tr.length-1; ii++)
{
    tr[ii].className = (td.cellIndex==ii)?"ooihj":"ooihs";
    ob[ii].style.display = (td.cellIndex==ii)?"block":"none";
}
}
function glbq(td)
{
var tr = td.parentElement.cells;
var ob = obody.rows;
for(var ii=0; ii<tr.length-1; ii++)
{
    tr[ii].className = (td.cellIndex==ii)?"ooilj":"ooils";
    ob[ii].style.display = (td.cellIndex==ii)?"block":"none";
}
}
</script>
</head><body>
<table>
<tr>
<td>
<table class="ooih" border="0" cellspacing="0" cellpadding="0" width="400" height="19">
<tr>
<td class="ooihj" nowrap onClick="ghbq(this)">标签一</td>
<td class="ooihs" nowrap onClick="ghbq(this)">标签二</td>
<td class="ooihs" nowrap onClick="ghbq(this)">标签三</td>
<td class="ooihs" nowrap onClick="ghbq(this)">标签四</td>
<td class="ooihx" width="100%">&nbsp;</td>
</tr>
</table>
<table class="ooib" id="obody" border="0" cellspacing="0" cellpadding="0" width="400" height="300">
<tr>
    <td>


       <table border="1">
         <tr>
            <td>1111</td>
<td>2222</td>
         </tr>
       </table>
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容二
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容三
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容四
    </td>
</tr>
</table>
</td>
</tr><tr>
<td>
<table class="ooil" border="0" cellspacing="0" cellpadding="0" width="400" height="19">
<tr>
<td class="ooilj" nowrap onClick="glbq(this)">标签一</td>
<td class="ooils" nowrap onClick="glbq(this)">标签二</td>
<td class="ooils" nowrap onClick="glbq(this)">标签三</td>
<td class="ooils" nowrap onClick="glbq(this)">标签四</td>
<td class="ooilx" width="100%">&nbsp;</td>
</tr>
</table>
<table class="ooic" id="obody" border="0" cellspacing="0" cellpadding="0" width="400" height="300">
<tr>
    <td>
标签内容一
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容二
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容三
    </td>
</tr>
<tr style="display: none">
    <td>
标签内容四
    </td>
</tr>
</table>
</td>
</tr>
</table></body>
</html>