jQuery帶動畫效果縱向tab選項卡切換代碼



89 353 118



特效描述: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

加群請備注:從官網了解到

老夫子电子