一个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 动画卷页 返回顶部 动画特效(兼容Chrome)
Feb 15 Javascript
Jquery中dialog属性小记
Sep 03 Javascript
JQuery实现表格中相同单元格合并示例代码
Jun 26 Javascript
DeviceOne 让你一见钟情的App快速开发平台
Feb 17 Javascript
vue.js初学入门教程(2)
Nov 07 Javascript
前端开发必知的15个jQuery小技巧
Jan 22 Javascript
Angular实现跨域(搜索框的下拉列表)
Feb 16 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
Vue SSR 组件加载问题
May 02 Javascript
微信小程序出现wx.getLocation再次授权问题的解决方法分析
Jan 16 Javascript
vuex页面刷新后数据丢失的方法
Jan 17 Javascript
JavaScript面向对象中接口实现方法详解
Jul 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
PHP Hash算法:Times33算法代码实例
2015/05/13 PHP
DLL+ ActiveX控件+WEB页面调用例子
2010/08/07 Javascript
通过正则格式化url查询字符串实现代码
2012/12/28 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
2013/01/09 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
jquery 构造函数在表单提交过程中修改数据
2015/05/25 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
JS控件bootstrap datepicker使用方法详解
2017/03/25 Javascript
Vue如何实现组件的源码解析
2017/06/08 Javascript
React入门教程之Hello World以及环境搭建详解
2017/07/11 Javascript
动态Axios的配置步骤详解
2018/01/12 Javascript
vue-swiper的使用教程
2018/08/30 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
vuex + keep-alive实现tab标签页面缓存功能
2019/10/17 Javascript
详解Nuxt内导航栏的两种实现方式
2020/04/16 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
2020/08/20 Javascript
JavaScript常用进制转换及位运算实例解析
2020/10/14 Javascript
JavaScript中展开运算符及应用的实例代码
2021/01/14 Javascript
python将pandas datarame保存为txt文件的实例
2019/02/12 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
通过python改变图片特定区域的颜色详解
2019/07/15 Python
10分钟用python搭建一个超好用的CMDB系统
2019/07/17 Python
python爬取百度贴吧前1000页内容(requests库面向对象思想实现)
2019/08/10 Python
用Python画一个LinkinPark的logo代码实例
2019/09/10 Python
python 实现在shell窗口中编写print不向屏幕输出
2020/02/19 Python
pytorch判断是否cuda 判断变量类型方式
2020/06/23 Python
详解Selenium-webdriver绕开反爬虫机制的4种方法
2020/10/28 Python
python和opencv构建运动检测器的实现
2021/03/03 Python
医药个人求职信范文
2014/01/29 职场文书
作风年建设汇报材料
2014/08/14 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016年5月份红领巾广播稿
2015/12/21 职场文书
Python虚拟环境virtualenv是如何使用的
2021/06/20 Python
css3应用示例:新增的选择器
2022/03/16 HTML / CSS