简单通用的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之水平横向滚动歌词同步的应用
May 07 Javascript
鼠标经过的文本框textbox变色
May 21 Javascript
javascript 图片裁剪技巧解读
Nov 15 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
AngularJS $injector 依赖注入详解
Sep 14 Javascript
基于Vue过渡状态实例讲解
Sep 14 Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
element-ui组件中input等的change事件中传递自定义参数
May 22 Javascript
详解vue 动态加载并注册组件且通过 render动态创建该组件
May 30 Javascript
JavaScript实现模态对话框实例
Jan 13 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 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循环获取GET和POST值的代码
2008/04/09 PHP
PHP使用range协议实现输出文件断点续传代码实例
2014/07/04 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
php实现将上传word文件转为html的方法
2015/06/03 PHP
如何使用php实现评委评分器
2015/07/31 PHP
PHP实现文字写入图片功能
2019/02/18 PHP
PHP根据key删除数组中指定的元素
2019/02/28 PHP
thinkphp 框架数据库切换实现方法分析
2020/05/18 PHP
一个对于Array的简单扩展
2006/10/03 Javascript
简单实现异步编程promise模式
2015/07/31 Javascript
js+css实现回到顶部按钮(back to top)
2016/03/02 Javascript
JavaScript实现数据类型的相互转换
2016/03/06 Javascript
JavaScript动态检验密码强度的实现方法
2016/11/09 Javascript
Node.js与Sails redis组件的使用教程
2017/02/14 Javascript
JS实现的五级联动菜单效果完整实例
2017/02/23 Javascript
js实现json数组分组合并操作示例
2019/02/12 Javascript
vue多页面项目中路由使用history模式的方法
2019/09/23 Javascript
[01:20]DOTA2 齐天大圣至宝动态展示
2016/12/13 DOTA
Python 正则表达式实现计算器功能
2017/04/29 Python
Django admin实现图书管理系统菜鸟级教程完整实例
2017/12/12 Python
Numpy掩码式数组详解
2018/04/17 Python
Python中按键来获取指定的值
2019/03/02 Python
pytorch numpy list类型之间的相互转换实例
2019/08/18 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
基于python图书馆管理系统设计实例详解
2020/08/05 Python
详解css3中的伪类before和after常见用法
2020/11/17 HTML / CSS
地球鞋加拿大官网:Earth Shoes Canada
2020/11/17 全球购物
后勤采购员岗位职责
2013/12/19 职场文书
企业文化标语大全
2014/06/10 职场文书
2014年中职班主任工作总结
2014/12/16 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
装配车间主任岗位职责
2015/04/08 职场文书
2016简单的租房合同范本
2016/03/18 职场文书
人民币使用说明书
2019/04/17 职场文书
Python中seaborn库之countplot的数据可视化使用
2021/06/11 Python
mysql中int(3)和int(10)的数值范围是否相同
2021/10/16 MySQL