简单通用的JS滑动门代码


Posted in Javascript onDecember 19, 2008
<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 判断代码全收集
Apr 28 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
关于javascript模块加载技术的一些思考
Nov 28 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
详解jQuery向动态生成的内容添加事件响应jQuery live()方法
Nov 02 Javascript
jQuery插件实现无缝滚动特效
Nov 24 Javascript
JavaScript九九乘法口诀表的简单实现
Oct 04 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
微信小程序实现横向滚动导航栏效果
Dec 12 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
比较全的JS checkbox全选、取消全选、删除功能代码
Dec 19 #Javascript
Javascript 获取LI里的内容
Dec 17 #Javascript
FLASH 广告之外的链接
Dec 16 #Javascript
用tip解决Ext列宽度不够的问题
Dec 13 #Javascript
兼容ie和firefox js关闭代码
Dec 11 #Javascript
IE和Firefox下javascript的兼容写法小结
Dec 10 #Javascript
js 禁用浏览器的后退功能的简单方法
Dec 10 #Javascript
You might like
php switch语句多个值匹配同一代码块的实现
2014/03/03 PHP
php生成mysql的数据字典
2016/07/07 PHP
Yii框架分页实现方法详解
2017/05/20 PHP
PHP基于phpqrcode类生成二维码的方法详解
2018/03/14 PHP
把JS与CSS写在同一个文件里的书写方法
2007/06/02 Javascript
Js切换功能的简单方法
2010/11/23 Javascript
各浏览器中querySelector和querySelectorAll的实现差异分析
2012/05/23 Javascript
nodejs动态创建二维码的方法
2017/08/12 NodeJs
深入浅出es6模板字符串
2017/08/26 Javascript
Angular6中使用Swiper的方法示例
2018/07/09 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
2019/09/06 Javascript
js实现上传图片并显示图片名称
2019/12/18 Javascript
JS表格的动态操作完整示例
2020/01/13 Javascript
JavaScript运行机制实例分析
2020/04/11 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
详解微信小程序「渲染层网络层错误」的解决方法
2021/01/06 Javascript
[43:49]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
详细介绍Python语言中的按位运算符
2013/11/26 Python
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
PyQt实现界面翻转切换效果
2018/04/20 Python
解决Ubuntu pip 安装 mysql-python包出错的问题
2018/06/11 Python
python实现五子棋人机对战游戏
2020/03/25 Python
树莓派使用USB摄像头和motion实现监控
2019/06/22 Python
python读写Excel表格的实例代码(简单实用)
2019/12/19 Python
Python3监控疫情的完整代码
2020/02/20 Python
在python下实现word2vec词向量训练与加载实例
2020/06/09 Python
Python-for循环的内部机制
2020/06/12 Python
美国一家著名的儿童鞋制造商:Stride Rite
2017/01/02 全球购物
JDO的含义
2012/11/17 面试题
JAVA中的关键字有什么特点
2014/03/07 面试题
C#中的验证控件有几种
2014/03/08 面试题
违纪检讨书
2015/01/27 职场文书
大学四年个人总结
2015/03/03 职场文书
如何书写先进事迹材料?
2019/07/02 职场文书
Python 流媒体播放器的实现(基于VLC)
2021/04/28 Python
Github 使用python对copilot做些简单使用测试
2022/04/14 Python