简单通用的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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
javascript 字符串连接的性能问题(多浏览器)
Nov 18 Javascript
jQuery如何实现点击页面获得当前点击元素的id或其他信息
Jan 09 Javascript
vue-dialog的弹出层组件
May 25 Javascript
JavaScript基础之this详解
Jun 04 Javascript
js canvas实现适用于移动端的百分比仪表盘dashboard
Jul 18 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
Vue props用法详解(小结)
Jul 03 Javascript
iView框架问题整理小结
Oct 16 Javascript
解决layer弹出层msg的文字不显示的问题
Sep 11 Javascript
微信小程序学习总结(一)项目创建与目录结构分析
Jun 04 Javascript
JS定时器如何实现提交成功提示功能
Jun 12 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新手上路(十四)
2006/10/09 PHP
php去除换行符的方法小结(PHP_EOL变量的使用)
2013/02/16 PHP
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
PHP计算百度地图两个GPS坐标之间距离的方法
2015/01/09 PHP
比较详细的javascript对象的property和prototype是什么一种关系
2007/08/06 Javascript
javascript获取checkbox复选框获取选中的选项
2014/08/12 Javascript
jQuery实现在列表的首行添加数据
2015/05/19 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
谷歌Chrome浏览器扩展程序开发小记
2016/01/06 Javascript
javascript实现标签切换代码示例
2016/05/22 Javascript
JavaScript实现清空(重置)文件类型INPUT元素值的方法
2016/11/17 Javascript
原生和jQuery的ajax用法详解
2017/01/23 Javascript
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
2018/08/20 Javascript
vue实现双向绑定和依赖收集遇到的坑
2018/11/29 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
2019/04/11 Javascript
Vue 进阶之路(三)
2019/04/18 Javascript
vue 输入电话号码自动按3-4-4分割功能的实现代码
2020/04/30 Javascript
跟老齐学Python之通过Python连接数据库
2014/10/28 Python
python多线程用法实例详解
2015/01/15 Python
用Python进行一些简单的自然语言处理的教程
2015/03/31 Python
Python字符串、元组、列表、字典互相转换的方法
2016/01/23 Python
python将字符串以utf-8格式保存在txt文件中的方法
2018/10/30 Python
wxpython+pymysql实现用户登陆功能
2019/11/19 Python
python3中numpy函数tile的用法详解
2019/12/04 Python
python 画3维轨迹图并进行比较的实例
2019/12/06 Python
python matplotlib 绘图 和 dpi对应关系详解
2020/03/14 Python
Python sorted排序方法如何实现
2020/03/31 Python
pandas 数据类型转换的实现
2020/12/29 Python
倩碧澳大利亚官网:Clinique澳大利亚
2019/07/22 全球购物
职高毕业生自我鉴定
2013/10/21 职场文书
四年级下册教学反思
2014/02/01 职场文书
元旦晚会策划方案
2014/02/18 职场文书
中考标语大全
2014/06/05 职场文书
科学发展观活动总结
2014/08/28 职场文书
学校2015年纠风工作总结
2015/05/15 职场文书
python单元测试之pytest的使用
2021/06/07 Python