简单通用的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 相关文章推荐
A标签中通过href和onclick传递的this对象实现思路
Apr 19 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
js css实现垂直方向自适应的三角提示菜单
Jun 26 Javascript
JavaScript 链式结构序列化详解
Sep 30 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
深入理解javascript的getTime()方法
Feb 16 Javascript
Angular2下使用pdf插件的方法详解
Apr 29 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
关于node-bindings无法在Electron中使用的解决办法
Dec 18 Javascript
vue router带参数页面刷新或回退参数消失的解决方法
Feb 27 Javascript
JavaScript的Proxy可以做哪些有意思的事儿
Jun 15 Javascript
JavaScript实现班级抽签小程序
May 19 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
怎样在UNIX系统下安装php3
2006/10/09 PHP
PHP中用header图片地址 简单隐藏图片源地址
2008/04/09 PHP
php 进度条实现代码
2009/03/10 PHP
PHP数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
php实现的九九乘法口诀表简洁版
2014/07/28 PHP
又一个PHP实现的冒泡排序算法分享
2014/08/21 PHP
PHP基于递归算法解决兔子生兔子问题
2018/05/11 PHP
使用JavaScript检测Firefox浏览器是否启用了Firebug的代码
2010/12/28 Javascript
jQuery autocomplate 自扩展插件、自动完成示例代码
2011/03/28 Javascript
一个小例子解释如何来阻止Jquery事件冒泡
2014/07/17 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
jQuery 1.9.1源码分析系列(十四)之常用jQuery工具
2015/12/02 Javascript
Bootstrap按钮组件详解
2016/04/26 Javascript
老司机带你解读jQuery插件开发流程
2016/05/16 Javascript
JavaScript的String字符串对象常用操作总结
2016/05/26 Javascript
windows下vue-cli导入bootstrap样式
2017/04/25 Javascript
JS使用插件cryptojs进行加密解密数据实例
2017/05/11 Javascript
浅谈ES6 模板字符串的具体使用方法
2017/11/07 Javascript
three.js实现圆柱体
2018/12/30 Javascript
Python实现partial改变方法默认参数
2014/08/18 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python使用requests发送POST请求实例代码
2018/01/25 Python
解决pycharm回车之后不能换行或不能缩进的问题
2019/01/16 Python
Python简直是万能的,这5大主要用途你一定要知道!(推荐)
2019/04/03 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Django如何实现网站注册用户邮箱验证功能
2019/08/14 Python
python打印直角三角形与等腰三角形实例代码
2019/10/20 Python
python实现俄罗斯方块游戏(改进版)
2020/03/13 Python
CSS3模拟动画下拉菜单效果
2017/04/12 HTML / CSS
详解CSS3中的box-sizing(content-box与border-box)
2019/04/19 HTML / CSS
HTML5标签小集
2011/08/02 HTML / CSS
Tory Burch英国官方网站:美国时尚生活品牌
2017/12/06 全球购物
个人授权委托书范文
2014/09/21 职场文书
我们的节日元宵节活动总结
2015/02/06 职场文书
梳理总结Python开发中需要摒弃的18个坏习惯
2022/01/22 Python
python库Tsmoothie模块数据平滑化异常点抓取
2022/06/10 Python