简单通用的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 相关文章推荐
javascript prototype 原型链
Mar 12 Javascript
flash调用js中的方法,让js传递变量给flash的办法及思路
Aug 07 Javascript
谈一谈js中的执行环境及作用域
Mar 30 Javascript
用原生js做单页应用
Jan 17 Javascript
jquery实现弹窗功能(窗口居中显示)
Feb 27 Javascript
基于JavaScript实现活动倒计时效果
Apr 20 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
Apr 17 Javascript
node前端模板引擎Jade之标签的基本写法
May 11 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
Vue-cli打包后如何本地查看的操作
Sep 02 Javascript
JS继承实现方法及优缺点详解
Sep 02 Javascript
Vue中component标签解决项目组件化操作
Sep 04 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往windows中添加用户
2006/12/06 PHP
PHP 处理图片的类实现代码
2009/10/23 PHP
PHP中array_merge和array相加的区别分析
2013/06/17 PHP
php获取目录所有文件并将结果保存到数组(实例)
2013/10/25 PHP
php+ajax实时输入自动搜索匹配的方法
2014/12/26 PHP
php实现统计网站在线人数的方法
2015/05/12 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
JS location几个方法小姐
2008/07/09 Javascript
javascript form 验证函数 弹出对话框形式
2009/06/23 Javascript
基于jquery的15款幻灯片插件
2011/04/10 Javascript
jquery 追加tr和删除tr示例代码
2013/09/12 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
2014/02/04 Javascript
用IE重起计算机或者关机的示例代码
2014/03/10 Javascript
jquery滚动特效集锦
2015/06/03 Javascript
js淡入淡出的图片轮播效果代码分享
2015/08/24 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
2019/08/26 Javascript
JS实现canvas简单小画板功能
2020/06/23 Javascript
vue form表单post请求结合Servlet实现文件上传功能
2021/01/22 Vue.js
[19:59]2014DOTA2国际邀请赛 IG战队纪录片
2014/08/07 DOTA
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
Python搭建HTTP服务器和FTP服务器
2017/03/09 Python
python 定义n个变量方法 (变量声明自动化)
2018/11/10 Python
关于python导入模块import与常见的模块详解
2019/08/28 Python
python 实现矩阵填充0的例子
2019/11/29 Python
Python 列表反转显示的四种方法
2020/11/16 Python
HTML5 与 XHTML2
2008/10/17 HTML / CSS
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
医科学校毕业生自荐信
2013/11/09 职场文书
新学期决心书
2014/03/11 职场文书
学校清明节活动总结
2014/07/04 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
2015高三毕业寄语赠言
2015/02/27 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
2016年春季运动会通讯稿
2015/11/25 职场文书
为什么阅读对所有年龄段的孩子都很重要?
2019/07/08 职场文书
Redis基本数据类型Set常用操作命令
2022/06/01 Redis