TabControl

< HTML>
 < HEAD>
  < meta http-equiv="Content-Type" content="text/html; charset=gb2312">
 < style> td,div,body { font-size:12px; }
  #TabControl .unselect { text-align:center; cursor:hand; padding:5px; background-Color:FFFFFF; border:1px solid lightblue; cursor:default; }
  #TabControl .selected { text-align:center; border-top:1px solid lightblue; border-left:1px solid lightblue; border-right:1px solid lightblue; border-bottom:1px solid white; background-Color:white; padding:5px; cursor:default; }
  #TabControl .blank { border-top:1px solid white; border-left:1px solid white; border-right:1px solid white; border-bottom:1px solid lightblue; background-Color:white; }
  #abdomen { border-top:0px; border-left:1px solid lightblue; border-right:1px solid lightblue; border-bottom:1px solid lightblue; padding:10px; height:200px; }
  #container { width:100%; display:none; }
  #container .menu { border:1px solid lightblue; margin:5px; }
 < /style>
 < /HEAD>
 < body>
  < table cellspacing="0" cellpadding="0" id="TabControl" width="100%">
   <tr>
    <td width="5%" class="blank" nowrap>&nbsp;&nbsp;</td>
    <td width="5%" nowrap class="unselect">aaaaa</td>
    <td width="5%" nowrap class="unselect">bbbb</td>
    <td width="5%" nowrap class="unselect">cccc</td>
    <td width="5%" nowrap class="unselect">dddd</td>
    <td width="5%" nowrap class="unselect">eeee</td>
    <td width="5%" nowrap class="unselect">fff</td>
    <td width="65%" class="blank">&nbsp;</td>
   </tr>
  </table>
  <div id="abdomen">
   <div id="container" name="container" align="left">
   </div>
   <div id="container" name="container">bbbbbbbbbbbbbbbb</div>
   <div id="container" name="container">ccccccccccccccccccccccccccccc</div>
   <div id="container" name="container">ddddddddddddddddddddddddddddddddd</div>
   <div id="container" name="container">eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee</div>
   <div id="container" name="container">ffffffffffffffffffffffffffffffffff</div>
  </div>
  < SCRIPT LANGUAGE="javascript">
   var tabs=document.getElementById("TabControl").rows[0].cells;
   var containers=document.getElementsByName("container");
   var selecedID=1;
   show(0);
   for(n=1;n<tabs.length-1;n++)
   {
   tabs[n].onclick=new Function("show(" + (n-1) + ")");
    }
         function show(x)
   { 
   tabs[selecedID].className="unselect";
   containers[selecedID-1].style.display="none";
   containers[x].style.display="block";
   selecedID=x+1;
   tabs[selecedID].className="selected";
   }
 
  < /SCRIPT>
 < /body>
<  /HTML>