简单通用的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随机排序(随即出牌)
Sep 17 Javascript
JS获取文本框,下拉框,单选框的值的简单实例
Feb 26 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
Jun 19 Javascript
Knockout自定义绑定创建方法
Dec 26 Javascript
详解vue 模版组件的三种用法
Jul 21 Javascript
微信小程序倒计时功能实现代码
Nov 09 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
安装Node.js并启动本地服务的操作教程
May 12 Javascript
Vue数据绑定简析小结
May 07 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
jQuery实现滑动星星评分效果(每日分享)
Nov 13 jQuery
浅谈vue2的$refs在vue3组合式API中的替代方法
Apr 18 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
PHP4实际应用经验篇(6)
2006/10/09 PHP
PHP伪静态写法附代码
2008/06/20 PHP
php中使用临时表查询数据的一个例子
2013/02/03 PHP
教你如何快捷的使用cmd访问mysql小技巧
2014/05/26 PHP
Laravel模糊查询区分大小写的实例
2019/09/29 PHP
javascript中的toFixed固定小数位数 简单实例分享
2013/07/12 Javascript
Node.js编码规范
2014/07/14 Javascript
JS输入用户名自动显示邮箱后缀列表的方法
2015/01/27 Javascript
js实现类似菜单风格的TAB选项卡效果代码
2015/08/28 Javascript
jQuery实现标题有打字效果的焦点图代码
2015/11/16 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
jQuery给表格添加分页效果
2017/03/02 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
JavaScript简介_动力节点Java学院整理
2017/06/26 Javascript
React-Native使用Mobx实现购物车功能
2017/09/14 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
2019/05/13 Javascript
jquery分页优化操作实例分析
2019/08/23 jQuery
浅析webpack-bundle-analyzer在vue-cli3中的使用
2019/10/23 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
在实例中重学JavaScript事件循环
2020/12/03 Javascript
python 统计一个列表当中的每一个元素出现了多少次的方法
2018/11/14 Python
Python中super函数用法实例分析
2019/03/18 Python
python实现的多任务版udp聊天器功能案例
2019/11/13 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python爬虫之Selenium下拉框处理的实现
2020/12/04 Python
美国最大的在线生存商店:Survival Frog
2020/12/13 全球购物
本科生详细的自我评价
2013/09/19 职场文书
英文版餐饮运营管理求职信
2013/11/06 职场文书
环境科学专业个人求职信
2013/12/15 职场文书
2014年政风行风工作总结
2014/11/22 职场文书
2014年应急工作总结
2014/12/11 职场文书
党员进社区活动总结
2015/05/07 职场文书
2015年教师见习期工作总结
2015/05/20 职场文书
安全生产协议书
2016/03/22 职场文书
​(迎国庆)作文之我爱我的祖国
2019/09/19 职场文书
继承Win10缺点!教你关闭Win11烦人的网络搜索
2021/11/23 数码科技