一个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 相关文章推荐
用JQuery 实现AJAX加载XML并解析的脚本
Jul 25 Javascript
超级酷和最实用的jQuery实例收集(20个)
Apr 21 Javascript
如何使Chrome控制台支持多行js模式——意外发现
Jun 13 Javascript
js获取客户端外网ip的简单实例
Nov 21 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
js+jquery常用知识点汇总
Mar 03 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
Jun 02 Javascript
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
node.js 用socket实现聊天的示例代码
Oct 17 Javascript
浅谈webpack打包之后的文件过大的解决方法
Mar 07 Javascript
微信小程序设置滚动条过程详解
Jul 25 Javascript
JavaScript中EventBus实现对象之间通信
Oct 18 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
PHP系统流量分析的程序
2006/10/09 PHP
php下使用无限生命期Session的方法
2007/03/16 PHP
JS异常处理try..catch语句的作用和实例
2014/05/05 PHP
php静态文件生成类实例分析
2015/01/03 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
jquery键盘事件介绍
2011/01/31 Javascript
基于jquery实现的上传图片及图片大小验证、图片预览效果代码
2011/04/12 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
JavaScript中使用document.write向页面输出内容实例
2014/10/16 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
js控制网页前进和后退的方法
2015/06/08 Javascript
Prototype框架详解
2015/11/25 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
JQuery 又谈ajax局部刷新
2017/11/27 jQuery
利用CDN加速react webpack打包后的文件详解
2018/02/22 Javascript
vue2.0 资源文件assets和static的区别详解
2018/04/08 Javascript
js input输入百分号保存数据库失败的解决方法
2018/05/26 Javascript
node中实现删除目录的几种方法
2019/06/24 Javascript
layui button 按钮弹出提示窗口,确定才进行的方法
2019/09/06 Javascript
详解Vue.js 响应接口
2020/07/04 Javascript
下载安装setuptool和pip linux安装pip    
2014/01/24 Python
python MySQLdb Windows下安装教程及问题解决方法
2015/05/09 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
python中时间、日期、时间戳的转换的实现方法
2019/07/06 Python
Python3.5 win10环境下导入kera/tensorflow报错的解决方法
2019/12/19 Python
解决python 读取 log日志的编码问题
2019/12/24 Python
雅诗兰黛旗下走天然植物路线的彩妆品牌:Prescriptives
2016/08/14 全球购物
写一个方法1000的阶乘
2012/11/21 面试题
现在输入n个数字,以逗号,分开;然后可选择升或者降序排序;按提交键就在另一页面显示按什么排序,结果为,提供reset
2012/11/09 面试题
学生会竞选自荐信
2013/10/12 职场文书
小学课外活动总结
2014/07/09 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
医德医风自我评价2015
2015/03/03 职场文书
法学专业求职信范文
2015/03/19 职场文书
java实现对Hadoop的操作
2021/07/01 Java/Android
python数据分析之单因素分析线性拟合及地理编码
2022/06/25 Python