Made In ToFishes~

打包下载链接:jTabView-tofishes-2.1.zip

计划升级版:抽离出切换的效果,直显切换,淡入淡出,滑动切换等等各种切换方式,同时支持自定义切换效果

这个插件还能怎样用?留给你解答吧!

切换事件自动切换手风琴方式记忆功能

默认是单击切换

选项卡1选项卡2选项卡3

选项卡1的内容

选项卡1的内容

选项卡2的内容

选项卡2的内容

选项卡3的内容

选项卡3的内容

默认单击切换调用的代码:
	$("#click").jTabView({
		tab: "a",
		con: ".con"
	});
鼠标悬浮切换

选项卡1选项卡2选项卡3

选项卡1的内容

选项卡1的内容

选项卡2的内容

选项卡2的内容

选项卡3的内容

选项卡3的内容

鼠标悬浮切换调用的代码:
	$("#mouseover").jTabView({
		tab: "a",
		con: ".con",
		event: "mouseover", //鼠标悬浮事件
		hoverTime: 400 //设置一个延迟,提高体验,默认是300ms
	});
同理,event参数可以是任何jQuery事件
设置3秒自动切换

选项卡1选项卡2选项卡3

选项卡1的内容

选项卡1的内容

选项卡2的内容

选项卡2的内容

选项卡3的内容

选项卡3的内容

设置3秒自动切换的调用代码:
	$("#auto").jTabView({
		tab: "a",
		con: ".con",
		auto: 1, //启用自动切换
		time: 3000 //切换间隔时间
	});

想起焦点图切换了么,是的,这个可以作为一个焦点图切换,样式由你定

手风琴式切换,连续单击同一个选项卡标题,内容会在显示与隐藏之间切换

选项卡1选项卡2选项卡3

选项卡1的内容

选项卡1的内容

选项卡2的内容

选项卡2的内容

选项卡3的内容

选项卡3的内容

换一种风格:
  • 分类1的标题

    • 分类1的子分类标题
    • 分类1的子分类标题
  • 分类2的标题

    • 分类2的子分类标题
    • 分类2的子分类标题
  • 分类3的标题

    • 分类3的子分类标题
    • 分类3的子分类标题
手风琴式切换调用的代码:
	$("#accordion").jTabView({
		tab: "a",
		con: ".con",
		accordion: 1 //启用手风琴方式
	});
	
	$("#accordion-ul").jTabView({
		tab: "p",
		con: "ul",
		accordion: 1 //启用手风琴方式
	});
开启记忆功能,依赖于jQuery Cookie插件,刷新页面依然保留当前的选项卡位置,可以设置过期时间

选项卡1选项卡2选项卡3

选项卡1的内容

选项卡1的内容

选项卡2的内容

选项卡2的内容

选项卡3的内容

选项卡3的内容

开启记忆功能调用的代码:
	$("#retain").jTabView({
		tab: "a",
		con: ".con",
		retain: 1, //启用记忆防刷新功能
		expires: 1 //设置过期时间,单位 天
	});