简单通用的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 oop开发滑动(slide)菜单控件
Aug 25 Javascript
js固定DIV高度,超出部分自动添加滚动条的简单方法
Jul 10 Javascript
浅析JavaScript原型继承的陷阱
Dec 03 Javascript
jquery操作select详解(取值,设置选中)
Feb 07 Javascript
基于jQuery的判断iPad、iPhone、Android是横屏还是竖屏的代码
May 11 Javascript
jQuery学习总结之jQuery事件
Jun 30 Javascript
javascript操作数组详解
Dec 17 Javascript
封装属于自己的JS组件
Jan 27 Javascript
微信小程序实现简单表格
Feb 14 Javascript
基于vue中的scoped坑点解说
Sep 04 Javascript
node中使用shell脚本的方法步骤
Mar 23 Javascript
JavaScript实现显示和隐藏图片
Apr 29 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
用ODBC的分页显示
2006/10/09 PHP
第十一节--重载
2006/11/16 PHP
需要注意的几个PHP漏洞小结
2012/02/05 PHP
深入PHP与浏览器缓存的分析
2013/06/03 PHP
php上传大文件失败的原因及应对策略
2015/10/20 PHP
thinkphp5.1框架容器与依赖注入实例分析
2019/07/23 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
User Scripts: Video Download by User Scripts
2007/05/14 Javascript
javascript控制台详解
2015/06/25 Javascript
JQuery中Ajax()的data参数类型实例分析
2015/12/15 Javascript
微信小程序 合法域名校验出错详解及解决办法
2017/03/09 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
浅谈vue-cli加载不到dev-server.js的解决办法
2017/11/24 Javascript
web页面和微信小程序页面实现瀑布流效果
2018/09/26 Javascript
vue项目使用axios发送请求让ajax请求头部携带cookie的方法
2018/09/26 Javascript
详解koa2学习中使用 async 、await、promise解决异步的问题
2018/11/13 Javascript
微信小程序canvas开发水果老虎机的思路详解
2020/02/07 Javascript
vue页面跳转实现页面缓存操作
2020/07/22 Javascript
[02:41]DOTA2亚洲邀请赛小组赛第三日 赛事回顾
2015/02/01 DOTA
python通过装饰器检查函数参数数据类型的方法
2015/03/13 Python
linux环境下python中MySQLdb模块的安装方法
2017/06/16 Python
Python3.6实现带有简单界面的有道翻译小程序
2019/04/16 Python
解决django中ModelForm多表单组合的问题
2019/07/18 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
解决keras使用cov1D函数的输入问题
2020/06/29 Python
Python实现石头剪刀布游戏
2021/01/20 Python
日本钓鱼渔具和户外用品网上商店:naturum
2016/08/07 全球购物
巴西购物网站:Onofre Agora
2020/06/08 全球购物
继承时候类的执行顺序问题,一般都是选择题,问你将会打印出什么?
2015/11/18 面试题
揭牌仪式主持词
2014/03/19 职场文书
班组长竞聘书
2014/03/31 职场文书
企业领导班子四风对照检查材料
2014/09/27 职场文书
年终工作总结范文2014
2014/11/27 职场文书
刑事附带民事起诉状
2015/05/19 职场文书
心理学培训心得体会
2016/01/22 职场文书
Java字符串逆序方法详情
2022/03/21 Java/Android