Lix Tabs,javascript TAB切换类,由十年灯首发于博客园

LixTabs.js使用简介

  1. 第一个参数是一个html元素,第2个参数是一个对象,里面是LixTabs的详细设置参数
  2. 详细参数中,hd即head,表示tab的头部,bd即body,表示tab的内容体
详细参数列表:
hdtag:tab头部标签,默认div
hdcn:tab头部标签的class,默认是tabhd
hdtagcur:tab头部标签里面的当前tab标签的class,默认是cur
bdtag:tab内容区标签,默认div
bdcn:tab内容区的class,默认是tabbd
bdtagcur:tab当前显示内容区的class,默认是cur
event:触发切换的事件,默认是mouseover
delay:触发事件后延迟多少时间执行,默认是0

以下点击触发,并且非自动. 代码:
Tabs($id('tabLite'),{hdcn:'tablite',hdtagcur:'now',bdcn:'tabcon',event:'click'});
城市指数名牌指数网上百货
非自动,鼠标经过触发,延迟0.3秒。代码:
var t2=Tabs($id('tab2'),{hdcn:'tabhead',bdcn:'tabcon',bdtagcur:'show',delay:300});
城市名牌网络购物
鼠标经过时触发,且自动.代码:
var blog=Tabs($id('blog'),{hdcn:'tab-hd',hdtagcur:'current',bdcn:'tab-bd',bdtagcur:'current',auto:4000});
博客 草根 读图 活动
图片自动切换,mouseover触发。代码:
var pic = Tabs($id('f_div'),{hdtag:'UL',hdcn:'buttonDiv',hdtagcur:'on',
			bdcn:'imgDiv',bdtagcur:'now',auto:3000});

以下两个是批量实现的实例,mouseover触发,非自动

代码:
var as = $C('as','DIV',document);
	for(var i=0,l=as.length;i<l;i++){
		as[i].tab = Tabs(as[i],{hdtag:'UL',hdcn:'sn',hdtagcur:'now',bdcn:'imgs',bdtagcur:'cur'});
	}

1新闻标题一个1

2新闻标题一个2

3新闻标题一个3

1新闻标题一个1

2新闻标题一个2

3新闻标题一个3

4新闻标题一个4





实现仿当当图书的双重tab效果,大tab里套小tab,共4个tab

	var book=Tabs($id('book_tab1'),{hdcn:'book_tab1_top',hdtagcur:'active',bdcn:'book_tab1_content',bdtagcur:'show',delay:1});
	var tab1_0 = Tabs($id('tab1_0'),{hdcn:'book_djtg_tab',hdtagcur:'active',bdcn:'book_djtg_content',bdtagcur:'show'});
	var tab1_1 = Tabs($id('tab1_1'),{hdcn:'book_tsjc_tab',hdtagcur:'active',bdcn:'book_tsjc_content',bdtagcur:'show'});
	var tab1_2 = Tabs($id('tab1_2_0'),{hdcn:'book_tjss_tab',hdtagcur:'active',bdcn:'book_tjss_content',bdtagcur:'show'});
			
独家特供特书鉴藏特价书市

林格伦作品选(9册/套){最新

当当独家特供

作 者:(瑞典)林格伦

出版社:中国少年儿童出版

当当价:¥170.30

&nbsp;&nbsp;“皮皮”,这个最响亮的名字,从她诞生之日起,就震憾

1111111
22222
333333333
444444
55555555
6666666
7777777
8888888
9999999
10
    ul1
    ul2
更多>>

特价畅销榜

  • 1
  • 2
    沉思录(有史以来最伟大的作品
  • 3
    让阳光自然播洒:刘有生演讲录
  • 4
    一年级语文下(R)(配人教版
  • 5
    成功无捷径:第56号教室的奇迹
  • 6
    大国崛起(以历史的眼光和全球
  • 7
    动物庄园(赠送英文原版)
  • 8
    股市趋势技术分析(第8版)
  • 9
    论新时期共产党员的修养
  • 10
    人生的艺术(梁漱溟著)

以上效果全由tab切换类LixTabs.js实现