学习网易首页栏目滑门技术标签

今天在网易看到栏目滑动门效果，其实很早就看到了不少网站有这样的效果，不知道怎么搞的，今天在网上学习了一下，呵呵，把这段代码做下来供参考，我的网站：www.oneun.cn首页也有那样的效果，可以去看看....

<SCRIPT language=JavaScript>
var tID=0;
function ShowTabs(ID){
if(ID!=tID){
  TabTitle[tID].className='menu_title';
  TabTitle[ID].className='menu_title_on';
  Tabs[tID].style.display='none';
  Tabs[ID].style.display='';
  tID=ID;
}
}
</SCRIPT>
  <table width="100%" border=1>
    <tr align=middle>
      <td class=menu_title_on id=TabTitle onmouseover=ShowTabs(0)>QQ学院</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(1)>QQ空间</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(2)>雅虎NCP</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(3)>博客DIY</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(4)>网商学院</td>
      <td class=menu_title id=TabTitle onmouseover=ShowTabs(5)>推广学院</td>
    </tr>
  </table>
  <table width="100%" align=center border=1>
    <tr id=Tabs>
      <td vAlign=top height=100>QQ学院</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>QQ空间</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>雅虎NCP</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>博客DIY</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=50>网商学院</td>
    </tr>
    <tr id=Tabs style="DISPLAY: none">
      <td vAlign=top height=100>推广学院</td>
    </tr>
  </table>

如果想用点击的方式达到同样效果，只需将上面代码中的红色“onmouseover”改成"onclick"即可