一个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中拖拽属性draggable的使用

    浅析原生JavaScript中拖拽属性draggable的使用

    这篇文章主要为大家详细介绍了原生JavaScript中拖拽属性draggable使用的相关知识,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-03-03
  • bootstrap多层模态框滚动条消失的问题

    bootstrap多层模态框滚动条消失的问题

    本篇文章主要介绍了bootstrap多层模态框滚动条消失的问题,具有一定的参考价值,有兴趣的可以了解一下
    2017-07-07
  • JavaScript Canvas实现井字棋游戏

    JavaScript Canvas实现井字棋游戏

    这篇文章主要为大家详细介绍了JavaScript Canvas实现井字棋游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • javascript实现雪花飘落效果

    javascript实现雪花飘落效果

    这篇文章主要为大家详细介绍了javascript实现雪花飘落效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 原生JavaScript实现的无缝滚动功能详解

    原生JavaScript实现的无缝滚动功能详解

    这篇文章主要介绍了原生JavaScript实现的无缝滚动功能,结合实例形式详细分析了JavaScript无缝滚动具体实现步骤、相关操作技巧与注意事项,需要的朋友可以参考下
    2020-01-01
  • 浅谈js对象的创建和对6种继承模式的理解和遐想

    浅谈js对象的创建和对6种继承模式的理解和遐想

    下面小编就为大家带来一篇浅谈js对象的创建和对6种继承模式的理解和遐想。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript实现瀑布流以及加载效果

    JavaScript实现瀑布流以及加载效果

    这篇文章主要为大家详细介绍了JavaScript实现瀑布流以及加载效果的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-02-02
  • 火狐textarea输入法的bug的触发及解决

    火狐textarea输入法的bug的触发及解决

    在firefox中,如果一个textarea获取焦点,在输入法激活的状态如果这时js将该textarea的value修改,那么该textarea会直接被清空,下面是具体的解决方法,遇到类似问题的朋友可以参考下
    2013-07-07
  • 详解浏览器渲染页面过程

    详解浏览器渲染页面过程

    这篇文章主要介绍了详解浏览器渲染页面过程的相关资料,需要的朋友可以参考下
    2017-02-02
  • js弹出窗口之弹出层的小例子

    js弹出窗口之弹出层的小例子

    js弹出窗口之弹出层的小例子,需要的朋友可以参考一下
    2013-06-06

最新评论