一个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国旗变换效果代码
Aug 13 Javascript
不一样的文字闪烁 轮番闪烁
Nov 11 Javascript
JavaScript 判断判断某个对象是Object还是一个Array
Jan 28 Javascript
锋利的jQuery jQuery中的DOM操作
Mar 21 Javascript
js实现带搜索功能的下拉框实时搜索实时匹配
Nov 05 Javascript
Script标签与访问HTML页面详解
Jan 10 Javascript
raphael.js绘制中国地图 地图绘制方法
Feb 12 Javascript
jQuery通过控制节点实现仅在前台通过get方法完成参数传递
Feb 02 Javascript
jQuery实现行文字链接提示效果的方法
Mar 10 Javascript
jQuery中select与datalist制作下拉菜单时的区别浅析
Dec 30 Javascript
jQuery实现的浮动层div浏览器居中显示效果
Feb 03 Javascript
常用的 JS 排序算法 整理版
Apr 05 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
mysql_fetch_assoc和mysql_fetch_row的功能加起来就是mysql_fetch_array
2007/01/15 PHP
用PHP控制用户的浏览器--ob*函数的使用说明
2007/03/16 PHP
PHP函数spl_autoload_register()用法和__autoload()介绍
2012/02/04 PHP
PHP实现图片压缩的两则实例
2014/07/19 PHP
JavaScript 学习笔记二 字符串拼接
2010/03/28 Javascript
jQuery实现的省市县三级联动菜单效果完整实例
2016/08/01 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
2016/10/11 Javascript
JavaScript获取短信验证码(周期性)
2016/12/29 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
使用JavaScript破解web
2018/09/28 Javascript
JS高阶函数原理与用法实例分析
2019/01/15 Javascript
python获取糗百图片代码实例
2013/12/18 Python
python进阶教程之函数参数的多种传递方法
2014/08/30 Python
Python实现的批量下载RFC文档
2015/03/10 Python
Python制作爬虫采集小说
2015/10/25 Python
python 通过字符串调用对象属性或方法的实例讲解
2018/04/21 Python
python输出100以内的质数与合数实例代码
2018/07/08 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Python2和Python3.6环境解决共存问题
2018/11/09 Python
对python xlrd读取datetime类型数据的方法详解
2018/12/26 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
详解用Python为直方图绘制拟合曲线的两种方法
2019/08/21 Python
详解Python并发编程之从性能角度来初探并发编程
2019/08/23 Python
python GUI库图形界面开发之PyQt5线程类QThread详细使用方法
2020/02/26 Python
解决pip安装tensorflow中出现的no module named tensorflow.python 问题方法
2021/02/20 Python
美国专注于健康商品的网站:eVitamins
2017/01/23 全球购物
美国最大的在线寄售和旧货店:Swap.com
2018/08/27 全球购物
英语专业应届生求职信范文
2013/11/15 职场文书
两年的个人工作自我评价
2014/01/10 职场文书
教师研修随笔感言
2014/01/23 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
推荐信格式范文
2014/05/09 职场文书
硕士生找工作求职信
2014/07/05 职场文书
浪漫婚礼主题活动策划方案
2014/09/15 职场文书
宾馆前台接待岗位职责
2015/04/02 职场文书
MySQL一劳永逸永久支持输入中文的方法实例
2022/08/05 MySQL