简单通用的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 31 Javascript
js判断是否为数组的函数: isArray()
Oct 30 Javascript
js之onload事件的一点使用心得
Aug 14 Javascript
jQuery javaScript捕获回车事件(示例代码)
Nov 07 Javascript
jquery中插件实现自动添加用户的具体代码
Nov 15 Javascript
基于JS实现翻书效果的页面切换样式
Feb 16 Javascript
vue-cli+webpack记事本项目创建
Apr 01 Javascript
基于JQuery的Ajax方法使用详解
Aug 16 jQuery
babel之配置文件.babelrc入门详解
Feb 22 Javascript
Vue单页及多页应用全局配置404页面实践记录
May 22 Javascript
如何用原生js写一个弹窗消息提醒插件
May 24 Javascript
微信小程序点击保存图片到本机功能
Dec 13 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
上海无线电三厂简史修改版
2021/03/01 无线电
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
第四章 php数学运算
2011/12/30 PHP
php实现通过stomp协议连接ActiveMQ操作示例
2020/02/23 PHP
Javascript 继承实现例子
2009/08/12 Javascript
jQuery实现用方向键控制层的上下左右移动
2013/01/13 Javascript
jquery中的过滤操作详细解析
2013/12/02 Javascript
Javascript闭包用法实例分析
2015/01/23 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
JS基于VML技术实现的五角星礼花效果代码
2015/10/26 Javascript
jQuery根据表单name获取值的方法
2016/05/24 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
layui select动态添加option的实例
2018/03/07 Javascript
详解微信小程序调起键盘性能优化
2018/07/24 Javascript
Vuex mutitons和actions初使用详解
2019/03/04 Javascript
Layui点击图片弹框预览的实现方法
2019/09/16 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
vue实现日历表格(element-ui)
2020/09/24 Javascript
javascript实现倒计时关闭广告
2021/02/09 Javascript
[01:06:39]DOTA2上海特级锦标赛主赛事日 - 1 胜者组第一轮#1Liquid VS Alliance第三局
2016/03/02 DOTA
[00:52]黑暗之门更新 新英雄孽主驾临DOTA2
2016/08/24 DOTA
[01:02:05]LGD vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
python中去空格函数的用法
2014/08/21 Python
Python基于numpy灵活定义神经网络结构的方法
2017/08/19 Python
详解python解压压缩包的五种方法
2019/07/05 Python
python3 sorted 如何实现自定义排序标准
2020/03/12 Python
python中安装django模块的方法
2020/03/12 Python
django实现后台显示媒体文件
2020/04/07 Python
如何使用python-opencv批量生成带噪点噪线的数字验证码
2020/12/21 Python
台湾三立电视电商平台:电电购
2019/09/09 全球购物
澳大利亚最受欢迎的超级商场每日优惠:Catch
2020/11/17 全球购物
介绍一下Java的事务处理
2012/12/07 面试题
船舶专业个人求职信范文
2014/01/02 职场文书
2014年电工工作总结
2014/11/20 职场文书
2015年学校办公室主任工作总结
2015/07/20 职场文书
导游词之张家口
2019/12/13 职场文书