简单通用的JS滑动门代码- Javascript - 软晨网（RuanChen.com）

技术文章搜索

关键字

Javascript 中的简单通用的JS滑动门代码

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 350 ::

收藏到网摘: n/a

document.all与getElementById、getElementsByName、getElementsByTagName用法区别-getElementById Javascript select控件操作大全（新增、修改、删除、选中、清空、判断存在等）

网上的太复杂，这样的代码比较简单

复制代码代码如下:

<UL id=tabMainNav> 
<LI class=selected id=tab_GameinfoNav onmousemove="show_tab(0)"><SPAN><A id=tab_1 href="#">{$PHPCMS[sitename]}</A></SPAN></LI> 
<LI id=tab_ShareEmailNav onmousemove="show_tab(1)"><SPAN><A id=tab_2 href="#">由 Email 分享</A></SPAN> </LI> 
<LI id=tab_ShareIMNav onmousemove="show_tab(2)"><SPAN><A id=tab_3 href="#">由 IM 分享</A></SPAN> </LI> 
<LI id=tab_BlogNav onmousemove="show_tab(3)"><SPAN><A id=tab_4 href="#">发布到博客/网站</A></SPAN> </LI> 
</UL> 
<UL ID=''tabContent''> 
<LI></LI> 
<LI></LI> 
<LI></LI> 
<LI></LI> 
</UL>

JS代码

复制代码代码如下:

<script language="javascript"> 
function show_tab(id){ 
var tabMainNav; 
var tabContent; 
tabMainNav=document.getElementById('tabMainNav'); 
tabContent=document.getElementById('tabContent'); 
for(i=0;i<tabMainNav.children.length;i++){ 
if(i==id){ 
tabMainNav.children[i].className='selected'; 
tabContent.children[i].className=''; 
}else{ 
tabMainNav.children[i].className=''; 
tabContent.children[i].className='hidden'; 
} 
} 
} 
</script> 

CSS代码,对这两个CSS修改一下就可以显示不同的样式了
.hidden{
}
.selected{
}

Javascript 中的 简单通用的JS滑动门代码

评论 (0) All

Javascript 中的简单通用的JS滑动门代码