一个js的tab切换效果代码[代码分离]
更新时间：2010年04月11日 20:53:12 作者：
看了此文（YUI实现的Tab 切换），有感而发，写了一个tab切换的函数，做学习之用。原生js实现，因为框架不好玩。
支持自动播放
可定义鼠标事件延迟
不限制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.jb51.net/js/tab_switch/tab.html
打包下载地址:https://www.jb51.net/jiaoben/25777.html
可定义鼠标事件延迟
不限制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.jb51.net/js/tab_switch/tab.html
打包下载地址:https://www.jb51.net/jiaoben/25777.html
相关文章
本文给大家分享的是使用javascript结合ajax实现产品页面无刷新加载信息的代码，非常的简单实用，有需要的小伙伴可以参考下。2015-07-07
JavaScript中有几种常用的变量声明，例如：var、let、直接赋值和const 属性，本文将为大家详细介绍一下这四种方式的具体使用，需要的可以参考一下2023-06-06
今天小编就为大家分享一篇解决循环中setTimeout执行顺序的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-06-06
这篇文章主要为大家详细介绍了js实现拖动缓动效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-01-01
上网查一查的确存在这种Bug，除了位数上控制之外也没什么也好的方法（希望高手能提出其它思路）。2011-08-08
for循环中我们使用continue；终止本次循环计入下一个循环，使用break终止整个循环。下面小编通过本文给大家分享JS中跳出循环的示例代码，需要的朋友参考下吧2017-09-09
javascript读写XML实现广告轮换(兼容IE、FF)
最近更新网站首页广告，ASP.NET的广告控件很容易实现这点，可首页是静态页面，联想广告控件的原理决定采用javascript+xml实现这点方面配置，更新广告时只要更新xml即可，方便了广告轮换2013-08-08
如何通过js实现图片预览功能呢？下面小编就为大家带来一篇用js实现图片预览功能。给大家做个参考吧，一起跟随小编过来看看2016-03-03
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
今天小编就为大家分享一篇使用layui监听器监听select下拉框,事件绑定不成功的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-09-09
这篇文章主要介绍了JavaScript逻辑运算符的相关资料,帮助大家更好的理解和学习JavaScript，感兴趣的朋友可以了解下2020-09-09
最新评论