一个js的tab切换效果代码[代码分离]


Posted in Javascript onApril 11, 2010

支持自动播放
可定义鼠标事件延迟
不限制html结构
假设HTML如下:

 
<ul> 
<li id="t1">tab1</li> 
<li id="t2">tab2</li> 
<li id="t3">tab3</li> 
</ul> 
<div id="c1">content1</div> 
<div id="c2">content2</div> 
<div id="c3">content3</div>

执行定义的tab初始化函数
<script> 
var tabType={ 
trigger:'触发事件', 
tabCurrentClass:'当前tab的className' 
[,delay:'事件触发的延时', 
auto:'是否自动播放', 
timer:'自动播放周期'] 
} 
// tabType的前两个是必需参数,后面的3个可根据需要添加 
// 其后的tab->content对应关系以数组形式添加,以其id为参数识别,如下: 
// [tab1.id,content1.id,'o'],[tab2.id,content2.id],…… 
// 如果要设定某个tab默认是打开的,在后面加个”o”参数,如下: 
//eg: tabInit(tabType,[t1,c1,'o'],[t2,c2],…); 
} 
tabInit(type,['t1','c1','o'],['t2','c2'],['t3','c3']); 
</script>

演示地址:http://demo.3water.com/js/tab_switch/tab.html
打包下载地址:https://3water.com/jiaoben/25777.html
Javascript 相关文章推荐
IE7提供XMLHttpRequest对象为兼容
Mar 08 Javascript
jquery向.ashx文件post中文乱码问题的解决方法
Mar 28 Javascript
jquery查找tr td 示例模拟
May 08 Javascript
一个字符串反转函数可实现字符串倒序
Sep 15 Javascript
推荐9款炫酷的基于jquery的页面特效
Dec 07 Javascript
jquery实现表单验证并阻止非法提交
Jul 09 Javascript
jquery实现的伪分页效果代码
Oct 29 Javascript
JavaScript的this关键字的理解
Jun 18 Javascript
JS如何判断json是否为空
Jul 06 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
VUE axios发送跨域请求需要注意的问题
Jul 06 Javascript
详解Nuxt.js 实战集锦
Nov 19 Javascript
YUI的Tab切换实现代码
Apr 11 #Javascript
利用JS重写Cognos右键菜单的实现代码
Apr 11 #Javascript
可以将word转成html的js代码
Apr 11 #Javascript
jquery 表格分页等操作实现代码(pagedown,pageup)
Apr 11 #Javascript
jquery 模拟雅虎首页的点击对话框效果
Apr 11 #Javascript
url 编码 js url传参中文乱码解决方案
Apr 11 #Javascript
jquery学习笔记二 实现可编辑的表格
Apr 09 #Javascript
You might like
php5中date()得出的时间为什么不是当前时间的解决方法
2008/06/30 PHP
很让人受教的 提高php代码质量36计
2012/09/05 PHP
php中http与https跨域共享session的解决方法
2014/12/20 PHP
Yii CFileCache 获取不到值的原因分析
2017/02/08 PHP
解决PHP使用CURL发送GET请求时传递参数的问题
2019/10/11 PHP
Yii框架组件的事件机制原理与用法分析
2020/04/07 PHP
在网页里看flash的trace数据的js类
2009/01/10 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
一个网马的tips实现分析
2010/11/28 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
2015/09/22 Javascript
jQuery自定义图片缩放拖拽插件imageQ实现方法(附demo源码下载)
2016/05/27 Javascript
jQuey将序列化对象在前台显示地实现代码(方法总结)
2016/12/13 Javascript
使用AngularJS对表单提交内容进行验证的操作方法
2017/07/12 Javascript
web前端开发中常见的多列布局解决方案整理(一定要看)
2017/10/15 Javascript
浅析Vue自定义组件的v-model
2017/11/26 Javascript
js实现消灭星星(web简易版)
2020/03/24 Javascript
Python pass详细介绍及实例代码
2016/11/24 Python
Python读取Json字典写入Excel表格的方法
2018/01/03 Python
python 实现求解字符串集的最长公共前缀方法
2018/07/20 Python
python文件操作之批量修改文件后缀名的方法
2018/08/10 Python
详解Django解决ajax跨域访问问题
2018/08/24 Python
深入理解Python异常处理的哲学
2019/02/01 Python
详解Python连接MySQL数据库的多种方式
2019/04/16 Python
django框架基于模板 生成 excel(xls) 文件操作示例
2019/06/19 Python
python递归法解决棋盘分割问题
2019/07/17 Python
html5读取本地文件示例代码
2014/04/22 HTML / CSS
h5调用摄像头的实现方法
2016/06/01 HTML / CSS
极简鞋类,赤脚的感觉:Lems Shoes
2019/08/06 全球购物
英语专业学生的自我评价
2013/12/30 职场文书
公务员职业生涯规划书范文  
2014/01/19 职场文书
幼儿园小班植树节活动方案
2014/03/04 职场文书
2015年元旦活动总结
2014/05/09 职场文书
教研处工作方案
2014/05/26 职场文书
2014年团员学习十八大思想汇报
2014/09/13 职场文书
使用vue-element-admin框架从后端动态获取菜单功能的实现
2021/04/29 Vue.js
详解Anyscript开发指南绕过typescript类型检查
2022/09/23 Javascript