简单通用的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 相关文章推荐
jquery uploadify 在FF下无效的解决办法
Sep 26 Javascript
jQuery的remove()方法使用详解
Aug 11 Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 Javascript
JavaScript中for循环的几种写法与效率总结
Feb 03 Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 Javascript
JavaScript对象_动力节点Java学院整理
Jun 23 Javascript
详解用node.js实现简单的反向代理
Jun 26 Javascript
vue项目中的webpack-dev-sever配置方法
Dec 14 Javascript
JS 实现百度搜索功能
Feb 01 Javascript
JS加密插件CryptoJS实现的DES加密示例
Aug 16 Javascript
JavaScript展开操作符(Spread operator)详解
Jul 20 Javascript
vue实现在线翻译功能
Sep 27 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更改目录及子目录下所有的文件后缀的代码
2010/09/24 PHP
带密匙的php加密解密示例分享
2014/01/29 PHP
php实现阳历阴历互转的方法
2015/10/28 PHP
thinkphp中多表查询中防止数据重复的sql语句(必看)
2016/09/22 PHP
Web开发者必备的12款超赞jQuery插件
2010/12/03 Javascript
JS字符串累加Array不一定比字符串累加快(根据电脑配置)
2012/05/14 Javascript
QQ空间顶部折页撕开效果示例代码
2014/06/15 Javascript
JavaScript里四舍五入函数round用法实例
2015/04/06 Javascript
详解iframe与frame的区别
2016/01/13 Javascript
jQuery ajax分页插件实例代码
2016/01/27 Javascript
通过javascript进行UTF-8编码的实现方法
2016/06/27 Javascript
灵活使用数组制作图片切换js实现
2016/07/28 Javascript
AngularJS过滤器详解及示例代码
2016/08/16 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
2016/11/04 Javascript
jQuery实现的无缝广告图片左右滚动功能详解
2016/12/24 Javascript
移动端点击态处理的三种实现方式
2017/01/12 Javascript
JavaScript的数据类型转换原则(干货)
2018/03/15 Javascript
通过javascript实现段落的收缩与展开
2019/06/26 Javascript
js实现鼠标点击页面弹出自定义文字效果
2019/12/24 Javascript
[01:09:24]Ti4开幕式
2014/07/19 DOTA
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
Python 比较两个数组的元素的异同方法
2017/08/17 Python
PHP实现发送和接收JSON请求
2018/06/07 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
Django限制API访问频率常用方法解析
2020/10/12 Python
python中如何使用虚拟环境
2020/10/14 Python
Maje德国官网:法国女性成衣品牌
2017/02/10 全球购物
集团公司总经理岗位职责
2013/12/20 职场文书
高中生家长会演讲稿
2014/01/14 职场文书
创业者是否需要商业计划书?
2014/02/07 职场文书
小学感恩教育活动总结
2014/07/07 职场文书
java如何实现socket连接方法封装
2021/09/25 Java/Android
Android Rxjava3 使用场景详解
2022/04/07 Java/Android
Python爬虫网络请求之代理服务器和动态Cookies
2022/04/12 Python
Nginx 502 bad gateway错误解决的九种方案及原因
2022/08/14 Servers