一个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 相关文章推荐
需要做特殊处理的DOM元素属性的访问
Nov 05 Javascript
jquery实现的让超出显示范围外的导航自动固定屏幕最顶上
Sep 22 Javascript
js 连接数据库如何操作数据库中的数据
Nov 23 Javascript
js写一个弹出层并锁屏效果实现代码
Dec 07 Javascript
JS教程:window.location使用方法的区别介绍
Oct 04 Javascript
js选项卡的实现方法
Feb 09 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
Mar 13 Javascript
讲解JavaScript中for...in语句的使用方法
Jun 03 Javascript
微信小程序 获取相册照片实例详解
Nov 16 Javascript
关于redux-saga中take使用方法详解
Feb 27 Javascript
JavaScript实现图片懒加载的方法分析
Jul 05 Javascript
js实现鼠标点击页面弹出自定义文字效果
Dec 24 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
codeigniter使用技巧批量插入数据实例方法分享
2013/12/31 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
php获取指定范围内最接近数的方法
2015/06/02 PHP
php pthreads多线程的安装与使用
2016/01/19 PHP
jquery ui resizable bug解决方法
2010/10/26 Javascript
JS解析json数据并将json字符串转化为数组的实现方法
2012/12/25 Javascript
图片轮换效果实现代码(点击按钮停止执行)
2013/04/12 Javascript
JS判断文本框内容改变事件的简单实例
2014/03/07 Javascript
JavaScript之数组(Array)详解
2015/04/01 Javascript
谈谈JavaScript自定义回调函数
2015/10/18 Javascript
React.js入门实例教程之创建hello world 的5种方式
2016/05/11 Javascript
AngularJS 如何在控制台进行错误调试
2016/06/07 Javascript
jQuery学习心得总结(必看篇)
2016/06/10 Javascript
JavaScript中的冒泡排序法
2016/08/03 Javascript
js简单获取表单中单选按钮值的方法
2016/08/23 Javascript
web前端开发upload上传头像js示例代码
2016/10/22 Javascript
文件上传的几个示例分享【推荐】
2016/12/16 Javascript
jQuery第一次运行页面默认触发点击事件的实例
2018/01/10 jQuery
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
vue+webpack实现异步加载三种用法示例详解
2018/04/24 Javascript
微信小程序实现拍照画布指定区域生成图片
2019/07/18 Javascript
Python中遍历字典过程中更改元素导致异常的解决方法
2016/05/12 Python
利用python写个下载teahour音频的小脚本
2017/05/08 Python
Python中pygal绘制雷达图代码分享
2017/12/07 Python
对pandas数据判断是否为NaN值的方法详解
2018/11/06 Python
基于python中__add__函数的用法
2019/11/25 Python
Python+OpenCV实现将图像转换为二进制格式
2020/01/09 Python
澳大利亚最早和最古老的巨型游戏专家:Yardgames
2020/02/20 全球购物
法律顾问服务方案
2014/05/15 职场文书
传播学专业毕业生自荐书
2014/07/01 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
2014年绿化工作总结
2014/12/09 职场文书
主持稿开场白
2015/06/01 职场文书
销售会议开幕词
2016/03/04 职场文书
MongoDB修改oplog大小的四种方法
2022/04/11 MongoDB
Python如何让字典保持有序排列
2022/04/29 Python