Heim > Web-Frontend > js-Tutorial > Hauptteil

一个js的tab切换效果代码[代码分离]_javascript技巧

WBOY
Freigeben: 2016-05-16 18:29:48
Original
925 Leute haben es durchsucht

支持自动播放
可定义鼠标事件延迟
不限制html结构
假设HTML如下:

复制代码 代码如下:
 

  • tab1

  • tab2

  • tab3


content1

content2

content3


执行定义的tab初始化函数
复制代码 代码如下:

<script> <BR>var tabType={ <BR>trigger:'触发事件', <BR>tabCurrentClass:'当前tab的className' <BR>[,delay:'事件触发的延时', <BR>auto:'是否自动播放', <BR>timer:'自动播放周期'] <BR>} <BR>// tabType的前两个是必需参数,后面的3个可根据需要添加 <BR>// 其后的tab->content对应关系以数组形式添加,以其id为参数识别,如下: <BR>// [tab1.id,content1.id,'o'],[tab2.id,content2.id],…… <BR>// 如果要设定某个tab默认是打开的,在后面加个”o”参数,如下: <BR>//eg: tabInit(tabType,[t1,c1,'o'],[t2,c2],…); <BR>} <BR>tabInit(type,['t1','c1','o'],['t2','c2'],['t3','c3']); <BR></script>

演示地址:http://demo.jb51.net/js/tab_switch/tab.html
打包下载地址:http://www.jb51.net/jiaoben/25777.html
Verwandte Etiketten:
js
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage