一个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 相关文章推荐
javascript 中对象的继承〔转贴〕
Jan 22 Javascript
基于jquery的实现简单的表格中增加或删除下一行
Aug 01 Javascript
分享一道笔试题[有n个直线最多可以把一个平面分成多少个部分]
Oct 12 Javascript
JS实现图片无间断滚动代码汇总
Jul 30 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
jquery简单插件制作(fn.extend)完整实例
May 24 Javascript
老生常谈combobox和combotree模糊查询
Apr 17 Javascript
JS正则表达式验证中文字符
May 08 Javascript
JS中实现浅拷贝和深拷贝的代码详解
Jun 05 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
Jan 26 Javascript
jQuery 动态粒子效果示例代码
Jul 07 jQuery
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页面间参数传递的四种方法详解
2013/06/09 PHP
PHP与Ajax相结合实现登录验证小Demo
2016/03/16 PHP
php抽象方法和抽象类实例分析
2016/12/07 PHP
PHP基于rabbitmq操作类的生产者和消费者功能示例
2018/06/16 PHP
PHP创建对象的六种方式实例总结
2019/06/27 PHP
input、button的不同type值在ajax提交表单时导致的陷阱
2009/02/24 Javascript
flexigrid 类似ext grid的JS表格代码
2010/07/17 Javascript
javascript各浏览器中option元素的表现差异
2011/04/07 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
ajax在兼容模式下失效的快速解决方法
2016/03/22 Javascript
jquery将标签元素的高设为屏幕的百分比
2017/04/19 jQuery
浅谈Vue.js中ref ($refs)用法举例总结
2017/12/19 Javascript
Vue 换肤的示例实践
2018/01/23 Javascript
详解webpack-dev-server的简单使用
2018/04/02 Javascript
vue draggable resizable 实现可拖拽缩放的组件功能
2019/07/15 Javascript
vuejs中父子组件之间通信方法实例详解
2020/01/17 Javascript
[16:56]heroes英雄教学 司夜刺客
2014/09/18 DOTA
python三元运算符实现方法
2013/12/17 Python
python自动化测试之从命令行运行测试用例with verbosity
2014/09/28 Python
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python分布式环境下的限流器的示例
2017/10/26 Python
Python2与Python3的区别实例分析
2019/04/11 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
提高python代码运行效率的一些建议
2020/09/29 Python
python中Array和DataFrame相互转换的实例讲解
2021/02/03 Python
L’AGENCE官网:加州女装品牌
2018/06/03 全球购物
美国爆米花工厂:The Popcorn Factory
2019/09/14 全球购物
新驾驶员个人自我评价
2014/01/03 职场文书
《欢乐的泼水节》教学反思
2014/04/22 职场文书
政府门卫岗位职责
2014/04/29 职场文书
高一新生军训方案
2014/05/12 职场文书
中学清明节活动总结
2014/07/04 职场文书
2014年秋季新学期寄语
2014/08/02 职场文书
单位实习鉴定评语
2015/01/04 职场文书
2015年节能降耗工作总结
2015/05/22 职场文书