一个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 中介者模式实例
Dec 16 Javascript
Js 随机数产生6位数字
May 13 Javascript
Jquery.TreeView结合ASP.Net和数据库生成菜单导航条
Aug 27 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
Bootstrap源码解读下拉菜单(4)
Dec 23 Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 Javascript
浅谈JS 数字和字符串之间相互转化的纠纷
Oct 20 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
浅谈vue项目可以从哪些方面进行优化
May 05 Javascript
vue+webpack模拟后台数据的示例代码
Jul 26 Javascript
js实现指定时间倒计时效果
Aug 26 Javascript
浅谈vue中组件绑定事件时是否加.native
Nov 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
三国漫画《火凤燎原》宣布动画化PV放出 预计2020年播出
2020/03/08 国漫
smarty 原来也不过如此~~呵呵
2006/11/25 PHP
深入PHP获取随机数字和字母的方法详解
2013/06/06 PHP
深入php处理整数函数的详解
2013/06/09 PHP
PHP学习记录之数组函数
2018/06/01 PHP
SWFObject 2.1以上版本语法介绍
2010/07/10 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
javascript检测页面是否缩放的小例子
2013/05/16 Javascript
css样式标签和js语法属性区别
2013/11/06 Javascript
jquery实现右键菜单插件
2015/03/29 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
JavaScript+CSS实现仿Mootools竖排弹性动画菜单效果
2015/10/14 Javascript
canvas实现图像放大镜
2017/02/06 Javascript
jQuery接受后台传递的List的实例详解
2017/08/02 jQuery
详解webpack提取第三方库的正确姿势
2017/12/22 Javascript
使用vue制作探探滑动堆叠组件的实例代码
2018/03/07 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
2019/06/06 jQuery
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
2019/10/30 Javascript
优化Vue中date format的性能详解
2020/01/13 Javascript
JavaScript实现缓动动画
2020/11/25 Javascript
[52:10]LGD vs Optic Supermajor小组赛D组胜者组决赛 BO3 第二场 6.3
2018/06/04 DOTA
PyCharm使用Docker镜像搭建Python开发环境
2019/12/26 Python
K近邻法(KNN)相关知识总结以及如何用python实现
2021/01/28 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
Juicy Couture Beauty官方网站:香水和化妆品
2019/03/12 全球购物
非常详细的C#面试题集
2016/07/13 面试题
某公司部分笔试题
2013/11/05 面试题
实习生个人找工作的自我评价
2013/10/30 职场文书
经贸日语专业个人求职信
2013/12/13 职场文书
中学运动会广播稿
2014/01/19 职场文书
国庆节演讲稿范文2014
2014/09/19 职场文书
初三语文教学计划
2015/01/22 职场文书
个人思想政治总结
2015/03/05 职场文书
医院见习总结
2015/06/24 职场文书
SONY AN-LP1 短波有源天线放大器图
2022/04/05 无线电