简单通用的JS滑动门代码
程序员文章站
2023-11-08 22:38:22
复制代码 代码如下:
-
复制代码 代码如下:
<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{
}
上一篇： 深圳周边五一自驾游推荐好去处