一个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 相关文章推荐
parseInt parseFloat js字符串转换数字
Aug 01 Javascript
js操纵dom生成下拉列表框的方法
Feb 24 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
JS弹出对话框实现方法(三种方式)
Dec 18 Javascript
javascript下使用Promise封装FileReader
Feb 19 Javascript
jQuery解析返回的xml和json方法详解
Jan 05 Javascript
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
vue.js添加一些触摸事件以及安装fastclick的实例
Aug 28 Javascript
vue新vue-cli3环境配置和模拟json数据的实例
Sep 19 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
解决qrcode.js生成二维码时必须定义一个空div的问题
Jul 09 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学习之简单计算器实现代码
2011/06/09 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
javascript中数组中求最大值示例代码
2013/12/18 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
js判断游览器类型及版本号的代码
2014/05/11 Javascript
JQuery获取表格数据示例代码
2014/05/26 Javascript
jQuery中parents()方法用法实例
2015/01/07 Javascript
jquery+css实现的红色线条横向二级菜单效果
2015/08/22 Javascript
理解javascript封装
2016/02/23 Javascript
详解JS数组Reduce()方法详解及高级技巧
2017/08/18 Javascript
默认浏览器设置及vue自动打开页面的方法
2018/09/21 Javascript
layui动态渲染生成左侧3级菜单的方法(根据后台返回数据)
2019/09/23 Javascript
js DOM的事件常见操作实例详解
2019/12/16 Javascript
在 Vue 中编写 SVG 图标组件的方法
2020/02/24 Javascript
vue请求数据的三种方式
2020/03/04 Javascript
Vue使用vue-draggable 插件在不同列表之间拖拽功能
2020/03/12 Javascript
javascript中call,apply,bind的区别详解
2020/12/11 Javascript
python2.7无法使用pip的解决方法(安装easy_install)
2018/04/03 Python
Python3+OpenCV2实现图像的几何变换(平移、镜像、缩放、旋转、仿射)
2019/05/13 Python
Pandas DataFrame数据的更改、插入新增的列和行的方法
2019/06/25 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
15行Python代码实现免费发送手机短信推送消息功能
2020/02/27 Python
python关于变量名的基础知识点
2020/03/03 Python
Python-split()函数实例用法讲解
2020/12/18 Python
html5 worker 实例(一) 为什么测试不到效果
2013/06/24 HTML / CSS
HTML5中判断横屏竖屏的方法(移动端)
2016/08/04 HTML / CSS
CAT鞋英国官网:坚固耐用的靴子和鞋
2016/10/21 全球购物
医学护理毕业生自荐信
2013/11/07 职场文书
应聘教师求职信
2014/07/19 职场文书
庆国庆国旗下讲话稿2014
2014/09/21 职场文书
2014年敬老院工作总结
2014/12/08 职场文书
《确定位置》教学反思
2016/02/18 职场文书
Mysql 用户权限管理实现
2021/05/25 MySQL
Win10系统下配置Java环境变量
2021/06/13 Java/Android
Python可视化学习之seaborn调色盘
2022/02/24 Python