一个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 相关文章推荐
7个让JavaScript变得更好的注意事项
Jan 28 Javascript
js图片轮播效果实现代码
Apr 18 Javascript
学习JavaScript设计模式(策略模式)
Nov 26 Javascript
JS HTML5拖拽上传图片预览
Jul 18 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
Mar 15 Javascript
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
解决vue中修改export default中脚本报一大堆错的问题
Aug 27 Javascript
vue+django实现一对一聊天功能的实例代码
Jul 17 Javascript
Layui选项卡制作历史浏览记录的方法
Sep 28 Javascript
解决vue打包报错Unexpected token: punc的问题
Oct 24 Javascript
vue-cli4.0多环境配置变量与模式详解
Dec 30 Vue.js
Echarts如何重新渲染实例详解
May 30 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
解决phpmyadmin中文乱码问题。。。
2007/01/18 PHP
php查看当前Session的ID实例
2015/03/16 PHP
yii2 页面底部加载css和js的技巧
2016/04/21 PHP
php 利用socket发送GET,POST请求的实例代码
2020/07/04 PHP
js 三级关联菜单效果实例
2013/08/13 Javascript
jquery中获得元素尺寸和坐标的方法整理
2014/05/18 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
Bootstrap进度条学习使用
2017/02/09 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
nodejs acl的用户权限管理详解
2018/03/14 NodeJs
Vue中使用create-keyframe-animation与动画钩子完成复杂动画
2019/04/09 Javascript
解决vue单页面应用中动态修改title问题
2019/06/09 Javascript
通过循环优化 JavaScript 程序
2019/06/24 Javascript
[53:20]2018DOTA2亚洲邀请赛 4.1 小组赛 A组加赛 VG vs OG
2018/04/03 DOTA
使用FastCGI部署Python的Django应用的教程
2015/07/22 Python
python&amp;MongoDB爬取图书馆借阅记录
2016/02/05 Python
浅析python中的分片与截断序列
2016/08/09 Python
Python实现将16进制字符串转化为ascii字符的方法分析
2017/07/21 Python
python购物车程序简单代码
2018/04/18 Python
详解python中的index函数用法
2019/08/06 Python
关于ResNeXt网络的pytorch实现
2020/01/14 Python
python 错误处理 assert详解
2020/04/20 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
如何用用Python将地址标记在地图上
2021/02/07 Python
HTML5 HTMLCollection和NodeList的区别详解
2020/04/29 HTML / CSS
Giglio德国网上精品店:奢侈品服装和配件
2016/09/23 全球购物
波兰数码相机及配件网上商店: Cyfrowe.pl
2017/06/19 全球购物
接口中的方法可以是abstract的吗
2015/07/23 面试题
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
学习党代会心得体会
2014/09/05 职场文书
2014年村委会工作总结
2014/11/24 职场文书
防暑降温通知书
2015/04/27 职场文书
工作计划范文之财务管理
2019/08/09 职场文书
canvas实现贪食蛇的实践
2022/02/15 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
2022/08/14 Javascript