jQuery带动画效果纵向tab选项卡切换代码



84 333 112



特效描述:jQuery 动画效果 纵向tab选项卡切换,jQuery带动画效果纵向tab选项卡切换代码

代码结构

1. 引入CSS

<link rel="stylesheet" href="css/tabWeek.css">

2. 引入JS

<script src="js/jquery.min.js"></script>
<script src="js/tabWeek.js"></script>

3. HTML代码

<div class="tab-vertical">
	<div class="tab-header">
		<div class="tab-item active"><span>内容</span></div>
		<div class="tab-line"></div>
		<div class="tab-item"><span>状态</span></div>	
	</div>
	<div class="tab-body">
		<div class="week-content" id="myWeek">
			<div class="week-bar">
				<div class="week-row content"></div>
				<div class="week-row status"></div>
			</div>
		</div>
	</div>
</div>
<script type="text/javascript">
	$(function(){
		var list= [{
			 date:'2016-12-12',
			 week:'星期一',
			 contentList:[
				  {type:1,name:'现场勘查',count:10},
				  {type:2,name:'装表接电',count:11},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:0},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-13',
			 week:'星期二',
			 contentList:[
				  {type:1,name:'现场勘查',count:0},
				  {type:2,name:'装表接电',count:1},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-14',
			 week:'星期三',
			 contentList:[
				  {type:1,name:'现场勘查',count:1},
				  {type:2,name:'装表接电',count:1},
				  {type:3,name:'现场申校',count:2},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-15',
			 week:'星期四',
			 contentList:[
				  {type:1,name:'现场勘查',count:10},
				  {type:2,name:'装表接电',count:1},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:2}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-16',
			 week:'星期五',
			 contentList:[
				  {type:1,name:'现场勘查',count:10},
				  {type:2,name:'装表接电',count:11},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-17',
			 week:'星期六',
			 contentList:[
				  {type:1,name:'现场勘查',count:10},
				  {type:2,name:'装表接电',count:11},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		{
			 date:'2016-12-18',
			 week:'星期日',
			 contentList:[
				  {type:1,name:'现场勘查',count:10},
				  {type:2,name:'装表接电',count:11},
				  {type:3,name:'现场申校',count:12},
				  {type:3,name:'一岗制作业',count:12}
			  ],
			  statusList:[
				  {type:1,name:'处理中',count:10},
				  {type:2,name:'已完工',count:11},
				  {type:3,name:'已回访',count:12}
			  ]
		},
		];
		$("#myWeek").tabWeek(list,function(date,type){
			if($.trim(type)!=''){
				alert("点击业务类型数字:"+date+"--"+type);
			}else{
				alert("点击当天整块:"+date);
			}
		});
	});
</script>



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 加载动画 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 h5弹窗动画 html5弹窗动画 h5动画 h5背景动画 h5场景动画 h53D动画 h5界面动画 html5动画 h5按钮动画 html5按钮动画 h5图片动画 h5图标动画 html5图片动画 html5图标动画 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到