学习网易首页栏目滑门技术标签
今天在网易看到栏目滑动门效果,其实很早就看到了不少网站有这样的效果,不知道怎么搞的,今天在网上学习了一下,呵呵,把这段代码做下来供参考,我的网站: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"即可