js滑動門效果

<html>
<head>
<title>js滑動門效果</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<!--把下面代碼加到<head>與</head>之間-->
<style type="text/css教程">
*{font:12px "宋體";margin:0;padding:0;}
ul{list-style:none;}
a{text-decoration:none;}
a:hover{text-decoration:underline;}
.tabads{width:160px;}
.tabads ul{width:160px;height:24px;background:#fff;}
.tabads li{width:40px;float:left;height:18px;padding:6px 0 0 0;background:url(/picture/pic/63606/79be4821-1960-32d0-8f2f-72a0e9d4abb1.gif) no-repeat right #e4e4e4;text-align:center;color:#333;cursor:pointer;}
.tabads .tasadson{background:url(yun_qi_img/1177d8b9-cbf8-3fd2-9eda-0a9cf77958f7.gif) no-repeat right #ffe4a6;text-align:center;color:#333;font-weight:bold;cursor:pointer;}
.tabadscon{background:#ffd77b;padding:5px;width:150px;}
.tabadscon li{text-align:left;line-height:20px;}
</style>
<script language="網頁特效" type="text/javascript">
function show_tabadsmenu(tabadid_num,tabadnum){
 for(var i=0;i<4;i++){document.getelementbyid("tabadcontent_"+tabadid_num+i).style.display="none";}
 for(var i=0;i<4;i++){document.getelementbyid("tabadmenu_"+tabadid_num+i).classname="";}
 document.getelementbyid("tabadmenu_"+tabadid_num+tabadnum).classname="tasadson";
 document.getelementbyid("tabadcontent_"+tabadid_num+tabadnum).style.display="block";
}
</script>
</head>
<body>
<!--把下面代碼加到<body>與</body>之間-->
<div class="tabads">
  <ul>
    <li id="tabadmenu_10" onmouseo教程ver="settimeout('show_tabadsmenu(1,0)',200);" class="tasadson">vb</li>
    <li id="tabadmenu_11" onmouseover="settimeout('show_tabadsmenu(1,1)',200);">asp教程</li>
    <li id="tabadmenu_12" onmouseover="settimeout('show_tabadsmenu(1,2)',200);">php教程</li>
    <li id="tabadmenu_13" onmouseover="settimeout('show_tabadsmenu(1,3)',200);">cgi</li>
  </ul>
</div>
<div class="tabadscon">
  <ul id="tabadcontent_10">
    <li><a href="#" target="_blank">基於vc的推箱子遊戲</a></li>
  </ul>
  <ul id="tabadcontent_11" style="display:none;">
    <li><a href="#" target="_blank">vb批量重新命名程式</a></li>
  </ul>
  <ul id="tabadcontent_12" style="display:none;">
    <li><a href="#" target="_blank">vc++五子棋遊戲進階版源碼</a></li>
  </ul>
  <ul id="tabadcontent_13" style="display:none;">
    <li><a href="#" target="_blank">精美多模式delphi鬧鐘程式</a></li>
  </ul>
</div>
</body>
</html>

代碼二

<style type=text/css>.sec1 {
 border-right: gray 1px solid; border-top: #ffffff 1px solid; border-left: #ffffff 1px solid; cursor: hand; color: #000000; border-bottom: #ffffff 1px solid; background-color: #eeeeee
}
.sec2 {
 border-right: gray 1px solid; border-top: #ffffff 1px solid; font-weight: bold; border-left: #ffffff 1px solid; cursor: hand; color: #000000; background-color: #d4d0c8
}
.main_tab {
 border-right: gray 1px solid; border-left: #ffffff 1px solid; color: #000000; border-bottom: gray 1px solid; background-color: #d4d0c8
}
</style>

 <script language=javascript>
     function secboard(n)
  {
    for(i=0;i<sectable.cells.length;i++)
      sectable.cells[i].classname="sec1";
    sectable.cells[n].classname="sec2";
    for(i=0;i<maintable.tbodies.length;i++)
      maintable.tbodies[i].style.display="none";
    maintable.tbodies[n].style.display="block";
  }//。
      </script>

            <table id=sectable cellspacing=0 cellpadding=0 width=549 border=0>
              <tbody>
              <tr align=middle height=20>
                <td class=sec2 onclick=secboard(0) width="10%">站長特效網</td>
                <td class=sec1 onclick=secboard(1) width="10%">滑動門2號</td>
                <td class=sec1 onclick=secboard(2) width="10%">滑動門3號</td>
                <td class=sec1 onclick=secboard(3) width="10%">滑動門4號</td></tr></tbody></table>
            <table class=main_tab id=maintable height=240 cellspacing=0
            cellpadding=0 width=549 border=0><!--關於tbody標記-->
              <tbody style="display: block">
              <tr>
                <td valign=top align=middle><br><br>
                  <table cellspacing=0 cellpadding=0 width=490 border=0>
                    <tbody>
                    <tr>
                      <td>歡迎來到站長特效網<br>專註於網頁特效及廣告代碼<br><br>記住我們的網址：http://www.zzjs.net<br><br></td></tr></tbody></table></td></tr></tbody><!--關於cells集合-->
              <tbody style="display: none">
              <tr>
                <td valign=top align=middle><br><br>
                  <table cellspacing=0 cellpadding=0 width=490 border=0>
                    <tbody>
                    <tr>
                      <td>滑動門2號內容<br><br></td></tr></tbody></table></td></tr></tbody><!--關於tbodies集合-->
              <tbody style="display: none">
              <tr>
                <td valign=top align=middle><br><br>
                  <table cellspacing=0 cellpadding=0 width=490 border=0>
                    <tbody>
                    <tr>
                      <td>滑動門3號內容<br><br></td></tr></tbody></table></td></tr></tbody><!--關於display屬性-->
              <tbody style="display: none">
              <tr>
                <td valign=top align=middle><br><br>
                  <table cellspacing=0 cellpadding=0 width=490 border=0>
                    <tbody>
                    <tr>
                      <td>滑動門4號內容<br><br></td></tr></tbody></table></td></tr></tbody></table>