一个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

相关文章

  • javascript AutoScroller 函数类

    javascript AutoScroller 函数类

    javascript AutoScroller 自动滚动类代码,学习类的朋友可以参考下。
    2009-05-05
  • JS中的多态实例详解

    JS中的多态实例详解

    本文通过实例代码很详细的给大家介绍了js中的多态,感兴趣的朋友一起看看吧
    2017-10-10
  • css静态滤镜 + A:Hover 效果

    css静态滤镜 + A:Hover 效果

    css静态滤镜 + A:Hover 效果...
    2007-05-05
  • 一个js过滤空格的小函数

    一个js过滤空格的小函数

    过滤空格,尤其是在一些注册页面比较实用,可以用js在客户端将空格过滤掉,减轻服务器端的负担,下面是实现函数
    2014-10-10
  • JS重要知识点小结

    JS重要知识点小结

    这里列出了一些JS重要知识点(不全面,但自己感觉很重要)。彻底理解并掌握这些知识点,对于每个想要深入学习JS的朋友应该都是必须的
    2011-11-11
  • JavaScript判断数组类型的方法

    JavaScript判断数组类型的方法

    这篇文章主要介绍了JavaScript判断数组类型的方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
    2019-10-10
  • 页面内查找

    页面内查找

    页面内查找...
    2006-09-09
  • 微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    微信小程序中的canvas 文字断行和省略号显示功能的处理方法

    大家都知道在canvas中没有提供方法来处理文字的多行问题,只有通过截取指定字符串来达到目的。接下来通过本文给大家介绍微信小程序中的canvas 文字断行和省略号显示功能 ,需要的朋友可以参考下
    2018-11-11
  • js匿名函数作为函数参数详解

    js匿名函数作为函数参数详解

    下面小编就为大家带来一篇js匿名函数作为函数参数详解。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-06-06
  • javascript随机变色实例代码

    javascript随机变色实例代码

    在本篇文章里小编给大家分享的是关于javascript随机变色的相关实例内容,需要的朋友们可以测试下。
    2019-10-10

最新评论