简单通用的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 Object的extend是一个常用的功能
Dec 02 Javascript
JS 实现Json查询的方法实例
Apr 12 Javascript
JQuery中如何传递参数如click(),change()等具体实现
Apr 28 Javascript
关于jquery的多个选择器的使用示例
Oct 18 Javascript
JQuery球队选择实例
May 18 Javascript
jQuery仿gmail实现fixed布局的方法
May 27 Javascript
javascript获取系统当前时间的方法
Nov 19 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
详解原生JS回到顶部
Mar 25 Javascript
JS使用iView的Dropdown实现一个右键菜单
May 06 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判断是否是连乘数字串的方法示例
2017/07/03 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
seajs中模块的解析规则详解和模块使用总结
2014/03/12 Javascript
Jquery动态添加及删除页面节点元素示例代码
2014/06/16 Javascript
jquery结合CSS使用validate实现漂亮的验证
2015/01/29 Javascript
node.js [superAgent] 请求使用示例
2015/03/13 Javascript
js实现仿网易点击弹出提示同时背景变暗效果
2015/08/13 Javascript
jquery实现的Accordion折叠面板效果代码
2015/09/02 Javascript
JS与HTML结合使用marquee标签实现无缝滚动效果代码
2016/07/05 Javascript
Bootstrap学习笔记之环境配置(1)
2016/12/07 Javascript
Node.js 回调函数实例详解
2017/07/06 Javascript
js实现1,2,3,5数字按照概率生成
2017/09/12 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
Vue中的无限加载vue-infinite-loading的方法
2018/04/08 Javascript
解决vue 中 echart 在子组件中只显示一次的问题
2018/08/07 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
5个你不知道的JavaScript字符串处理库(小结)
2020/06/01 Javascript
python监控文件或目录变化
2016/06/07 Python
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
pyenv命令管理多个Python版本
2017/03/26 Python
Python及PyCharm下载与安装教程
2017/11/18 Python
浅谈Python实现2种文件复制的方法
2018/01/19 Python
python日期相关操作实例小结
2019/06/24 Python
python 画出使用分类器得到的决策边界
2019/08/21 Python
python3 下载网络图片代码实例
2019/08/27 Python
Jogun Shop中文官网:韩国知名时尚男装网站
2016/10/12 全球购物
运动会解说词200字
2014/02/06 职场文书
主持词开场白
2014/03/17 职场文书
诉前财产保全担保书
2014/05/20 职场文书
中文专业毕业生自荐信
2014/05/24 职场文书
课例研修方案
2014/05/31 职场文书
电子商务实训报告总结
2014/11/05 职场文书
市场营销计划书
2015/01/17 职场文书
Python数据分析之绘图和可视化详解
2021/06/02 Python
Go语言实现Base64、Base58编码与解码
2021/07/26 Golang
MySQL 逻辑备份 into outfile
2022/05/15 MySQL