一个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获取Radio,CheckBox选择的Value值(示例代码)
Dec 12 Javascript
js中哈希表的几种用法总结
Jan 28 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
Dec 17 Javascript
jQuery中attr()与prop()函数用法实例详解(附用法区别)
Dec 29 Javascript
jQuery版本升级踩坑大全
Jan 12 Javascript
实例讲解jquery中mouseleave和mouseout的区别
Feb 17 Javascript
jQuery height()、innerHeight()、outerHeight()函数的区别详解
May 23 Javascript
详解KOA2如何手写中间件(装饰器模式)
Oct 11 Javascript
js数组去重的方法总结
Jan 18 Javascript
jQuery插件实现非常实用的tab栏切换功能【案例】
Feb 18 jQuery
vue中获取滚动table的可视页面宽度调整表头与列对齐(每列宽度不都相同)
Aug 17 Javascript
JS实现前端路由功能示例【原生路由】
May 29 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多文件上传实现代码
2014/02/20 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
Laravel框架实现超简单的分页效果示例
2019/02/08 PHP
CentOS7系统搭建LAMP及更新PHP版本操作详解
2020/03/26 PHP
通过Unicode转义序列来加密,按你说的可以算是混淆吧
2007/05/06 Javascript
比Jquery的document.ready更快的方法
2010/04/28 Javascript
JS实现图片局部放大或缩小的方法
2016/08/20 Javascript
JavaScript 监控微信浏览器且自带返回按钮时间
2016/11/27 Javascript
jQuery niceScroll滚动条错位问题的解决方法
2018/02/03 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
2018/05/23 jQuery
移动端吸顶fixbar的解决方案详解
2019/07/17 Javascript
Swiper.js实现移动端元素左右滑动
2019/09/08 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
VUE实现图片验证码功能
2020/11/18 Javascript
js实现文章目录索引导航(table of content)
2020/05/10 Javascript
python模块之time模块(实例讲解)
2017/09/13 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
Python内建模块struct实例详解
2018/02/02 Python
python占位符输入方式实例
2019/05/27 Python
Python获取对象属性的几种方式小结
2020/03/12 Python
Pycharm插件(Grep Console)自定义规则输出颜色日志的方法
2020/05/27 Python
python文件读取失败怎么处理
2020/06/23 Python
Python连接Mysql进行增删改查的示例代码
2020/08/03 Python
HTML5之SVG 2D入门4—笔画与填充
2013/01/30 HTML / CSS
KEETSA环保床垫:更好的睡眠,更好的生活!
2016/11/24 全球购物
瑞士图书网站:Weltbild.ch
2019/09/17 全球购物
C语言开发工程师测试题
2016/12/20 面试题
党建示范点实施方案
2014/03/12 职场文书
团委竞选演讲稿
2014/04/24 职场文书
技术比武方案
2014/05/19 职场文书
企业党建工作汇报材料
2014/08/19 职场文书
介绍信范文大全
2015/05/07 职场文书
一劳永逸彻底解决pip install慢的办法
2021/05/24 Python
CSS实现章节添加自增序号的方法
2021/06/23 HTML / CSS
Redis实现订单过期删除的方法步骤
2022/06/05 Redis