简单通用的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下IE与Firefox下的差异兼容写法总结
Jun 18 Javascript
Web开发者必备的12款超赞jQuery插件
Dec 03 Javascript
jQuery帮助之筛选查找 children([expr])
Jan 31 Javascript
jquery如何改变html标签的样式(两种实现方法)
Jan 16 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
jQuery Validate 相关参数及常用的自定义验证规则
Mar 06 Javascript
Vue项目使用CDN优化首屏加载问题
Apr 01 Javascript
vue使用ajax获取后台数据进行显示的示例
Aug 09 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
Vue和Flask通信的实现
May 19 Vue.js
比较全的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
德劲1103二次变频版的打磨
2021/03/02 无线电
php代码优化及php相关问题总结
2006/10/09 PHP
Excel数据导入Mysql数据库的实现代码
2008/06/05 PHP
用PHP读取超大文件的实例代码
2012/04/01 PHP
PHP7新特性foreach 修改示例介绍
2016/08/26 PHP
jquery实现tr元素的上下移动示例代码
2013/12/20 Javascript
基于JS实现9种不同的面包屑和分布式多步骤导航效果
2017/02/21 Javascript
jquery实现动态创建form并提交的方法示例
2019/05/27 jQuery
微信小程序如何访问公众号文章
2019/07/08 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
vue实现整屏滚动切换
2020/06/29 Javascript
jQuery实现简单三级联动效果
2020/09/05 jQuery
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
在Python中使用全局日志时需要注意的问题
2015/05/06 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
深入理解Python单元测试unittest的使用示例
2017/11/18 Python
python使用正则来处理各种匹配问题
2019/12/22 Python
Python装饰器用法与知识点小结
2020/03/09 Python
Python 如何创建一个线程池
2020/07/28 Python
django使用graphql的实例
2020/09/02 Python
Python猫眼电影最近上映的电影票房信息
2020/09/18 Python
宝拉珍选美国官网:Paula’s Choice美国
2018/01/07 全球购物
雅高酒店中国:Accorhotels.com China
2018/03/26 全球购物
Android面试题及答案
2015/09/04 面试题
介绍一下write命令
2014/08/10 面试题
工程师自我评价怎么写
2013/09/19 职场文书
民事二审代理词
2015/05/25 职场文书
2015重阳节敬老活动总结
2015/07/29 职场文书
学会感恩主题班会
2015/08/12 职场文书
校园音乐节目广播稿
2015/08/19 职场文书
导游词之湖州-太湖
2019/10/11 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python
python 算法题——快乐数的多种解法
2021/05/27 Python
Vue实现导入Excel功能步骤详解
2021/07/03 Vue.js