简单通用的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 相关文章推荐
JScript中的&quot;this&quot;关键字使用方式补充材料
Mar 08 Javascript
jquery ready函数源代码研究
Dec 06 Javascript
JS打开图片另存为对话框实现代码
Dec 26 Javascript
jQuery+ajax实现动态执行脚本的方法
Jan 27 Javascript
JavaScript编写连连看小游戏
Jul 07 Javascript
jQuery插件开发精品教程(让你的jQuery更上一个台阶)
Nov 07 Javascript
jQuery给元素添加样式的方法详解
Dec 30 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
js计算两个日期间的天数月的实例代码
Sep 20 Javascript
vue自动化路由的实现代码
Sep 30 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
Dec 04 Javascript
梳理一下vue中的生命周期
Dec 30 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
PHPMyadmin 配置文件详解(配置)
2009/12/03 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
Vue.js学习笔记之 helloworld
2016/08/14 Javascript
jQuery leonaScroll 1.1 自定义滚动条插件(推荐)
2016/09/17 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
2016/10/10 Javascript
AngularJS ng-repeat指令中使用track by子语句解决重复数据遍历错误问题
2017/01/21 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
为什么我们要做三份 Webpack 配置文件
2017/09/18 Javascript
vue生成随机验证码的示例代码
2017/09/29 Javascript
jQuery中each遍历的三种方法实例分析
2018/09/07 jQuery
详解小程序开发经验:多页面数据同步
2019/05/18 Javascript
JS实现动态无缝轮播
2020/01/11 Javascript
如何基于layui的laytpl实现数据绑定的示例代码
2020/04/10 Javascript
javascript前端实现多视频上传
2020/12/13 Javascript
利用node.js开发cli的完整步骤
2020/12/29 Javascript
[02:05]2014DOTA2国际邀请赛 BBC外卡赛赛后总结
2014/07/09 DOTA
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
python字符串对其居中显示的方法
2015/07/11 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python数据结构之单链表详解
2017/09/12 Python
python实现员工管理系统
2018/01/11 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
Python django搭建layui提交表单,表格,图标的实例
2019/11/18 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
浅谈Python中的模块
2020/06/10 Python
利用纯css3实现的文字亮光特效的代码演示
2014/11/27 HTML / CSS
深入浅析CSS3中的Flex布局整理
2020/04/27 HTML / CSS
使用html2canvas将页面转成图并使用用canvas2image下载
2019/04/04 HTML / CSS
HTML5获取当前地理位置并在百度地图上展示的实例
2020/07/10 HTML / CSS
Moda Italia荷兰:意大利男士服装
2019/08/31 全球购物
澳大利亚购买太阳镜和眼镜网站:Glamoureyes
2020/09/22 全球购物
大学生学雷锋活动总结
2014/06/26 职场文书
原告离婚代理词
2015/05/23 职场文书
MySQL千万级数据表的优化实战记录
2021/08/04 MySQL
Python的property属性详细讲解
2022/04/11 Python