简单通用的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编程起步(第二课)
Jan 10 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
动态的改变IFrame的高度实现IFrame自动伸展适应高度
Dec 28 Javascript
Javascript中判断变量是数组还是对象(array还是object)
Aug 14 Javascript
JQUERY 设置SELECT选中项代码
Feb 07 Javascript
在Node.js中实现文件复制的方法和实例
Jun 05 Javascript
jquery中each方法示例和常用选择器
Jul 08 Javascript
js计算文本框输入的字符数
Oct 23 Javascript
vue 请求后台数据的实例代码
Jun 22 Javascript
深入浅析AngularJs模版与v-bind
Jul 06 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
Sep 21 Javascript
vue将单页面改造成多页面应用的方法
Nov 25 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服务器实现多session并发运行
2006/10/09 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP控制反转(IOC)和依赖注入(DI)
2017/03/13 PHP
PHP5.5新特性之yield理解与用法实例分析
2019/01/11 PHP
关于document.cookie的使用javascript
2010/10/29 Javascript
用js来解决ajax读取页面乱码
2010/11/28 Javascript
读jQuery之十三 添加事件和删除事件的核心方法
2011/08/23 Javascript
jquery修改属性值实例代码(设置属性值)
2014/01/06 Javascript
jquery学习总结(超级详细)
2014/09/04 Javascript
js控制页面的全屏展示和退出全屏显示的方法
2015/03/10 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
在Swiper内如何制作CSS3动画效果示例代码
2017/12/07 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
Vue2.0结合webuploader实现文件分片上传功能
2018/03/09 Javascript
微信小程序仿抖音视频之整屏上下切换功能的实现代码
2020/05/24 Javascript
Python 拷贝对象(深拷贝deepcopy与浅拷贝copy)
2008/09/06 Python
python连接mysql并提交mysql事务示例
2014/03/05 Python
九步学会Python装饰器
2015/05/09 Python
Python基于回溯法解决01背包问题实例
2017/12/06 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
TF-IDF与余弦相似性的应用(一) 自动提取关键词
2017/12/21 Python
基于python 爬虫爬到含空格的url的处理方法
2018/05/11 Python
解决win64 Python下安装PIL出错问题(图解)
2018/09/03 Python
Python循环实现n的全排列功能
2019/09/16 Python
解释一下钝化(Swap out)
2016/12/26 面试题
新教师工作感言
2014/02/16 职场文书
原料仓仓管员岗位职责
2014/07/08 职场文书
食品委托检验协议书范本
2014/09/12 职场文书
党的群众路线对照检查材料思想汇报
2014/09/25 职场文书
财政局长个人总结
2015/03/04 职场文书
病危通知书样本
2015/04/17 职场文书
2016入党积极分子党课培训心得体会
2016/01/06 职场文书
廉洁自律心得体会2016
2016/01/13 职场文书
python用海龟绘图写贪吃蛇游戏
2021/06/18 Python
Spring JPA 增加字段执行异常问题及解决
2022/06/10 Java/Android