QQ客服
當前位置 : 中国福彩快乐十分开奖分布图 > 代碼 > 網頁特效 > 選項卡/滑動門 > jQuery行業案例tab選項卡布局代碼

双色球中奖号码分布图表: VIP商用 jQuery行業案例tab選項卡布局代碼

jQuery tab產品案例圖標文字選項卡切換,懸停導航文字標簽,內容切換和懸停圖標,標題文字切換。兩種tab選項卡結合布局代碼。支持自動選項卡切換效果。
分享到微信朋友圈
X
[聲明]該素材是本站付費買斷的作品代碼,享受著作權?;?,未經允許請勿轉載,否則追究相應的法律責任。

使用方法:

1、head引入css文件

<link rel="stylesheet" type="text/css" href="statics/css/style.css" />

2、head引入js文件

<script src="statics/js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>

3、body引入HTML代碼

<div class="card-fouth">
	<div class="sub-title">行業案例</div>
	<div class="desc desc-list">

		<div class="industry first active">
			<span>零售</span>
		</div>

		<div class="industry">
			<span>民生</span>
		</div>

		<div class="industry">
			<span>政務</span>
		</div>

		<div class="industry">
			<span>出行</span>
		</div>

		<div class="industry">
			<span>醫療</span>
		</div>

		<div class="industry last">
			<span>生活服務</span>
		</div>

	</div>
	<div class="case-container">

		<div class="case-panel tab-1 active">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/NUGQZVkbmXEvoYiYnoAS.jpg">

				<img class="phone-image  image-2" src="statics/images/iObuNbWbrfXBMlWsklKE.jpg">

				<img class="phone-image  image-3" src="statics/images/HFUCeZzswVWsOPHKygdv.jpg">

				<img class="phone-image  image-4" src="statics/images/oTMnsFOGhPSdhhqJPvBR.jpg">

				<img class="phone-image  image-5" src="statics/images/kmzXYyMiWhGHpTSCoHoG.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">每日必搶</div>
						<div class="case-text">致力打造一個良好體驗的購物平臺</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover  active" data-title="每日必搶" data-desc="致力打造一個良好體驗的購物平臺" data-qrcode="statics/images/erweima2.png" src="statics/images/3c6d1007-e159-43d5-9298-69d81ddc7381.png">

					<img class="image-hover " data-title="閑魚小程序" data-desc="閑置交易,就用閑魚!" data-qrcode="statics/images/erweima2.png" src="statics/images/ae3d5be3-c871-4977-9de2-fa5d054e5263.png">

					<img class="image-hover " data-title="阿里巴巴1688" data-desc="阿里巴巴1688官方-批發-采購-貨源" data-qrcode="statics/images/erweima2.png" src="statics/images/eaba6153-25e3-4769-a6bb-3e6634b3fc2c.png">

					<img class="image-hover " data-title="衣二三" data-desc="衣二三提供高端女性時裝租賃服務" data-qrcode="statics/images/erweima2.png" src="statics/images/b34085d2-dbf4-4331-bbb2-e8fd490122c3.png">

					<img class="image-hover " data-title="魔盒CITYBOX" data-desc="魔盒CITYBOX致力于新零售" data-qrcode="statics/images/erweima2.png" src="statics/images/14c9d9ee-2d97-4d94-b102-1cde17ac43e5.png">

				</div>
			</div>
		</div>

		<div class="case-panel tab-2">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/XkqPPOtrOycjoVIresby.jpg">

				<img class="phone-image  image-2" src="statics/images/IphczwkQENHzzDSOcsQO.jpg">

				<img class="phone-image  image-3" src="statics/images/XkqPPOtrOycjoVIresby.jpg">

				<img class="phone-image  image-4" src="statics/images/BZuPcFYPZQxVzXGlgkIP.jpg">

				<img class="phone-image  image-5" src="statics/images/xAttzuujLQIVsDdldCbJ.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">社保公積金個人繳納</div>
						<div class="case-text">個人自助繳納社保公積金</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover  active" data-title="社保公積金個人繳納" data-desc="個人自助繳納社保公積金" data-qrcode="statics/images/erweima2.png" src="statics/images/4734401c-4438-4288-8fe7-cda10c645a17.png">

					<img class="image-hover " data-title="全國社保計算器" data-desc="my社保,社保明細測算工具" data-qrcode="statics/images/erweima2.png" src="statics/images/35c3450c-4343-4580-b987-3594170a4204.png">

					<img class="image-hover " data-title="全國公積金計算器" data-desc="my社保,公積金貸款測算工具" data-qrcode="statics/images/erweima2.png" src="statics/images/efd26957-11a1-4620-8a41-f77766acf148.png">

					<img class="image-hover " data-title="工資個稅計算器" data-desc="my社保出品,多種個人所得稅計算" data-qrcode="statics/images/erweima2.png" src="statics/images/532c776b-1bc1-47a5-82a5-9b848a187605.png">

					<img class="image-hover " data-title="微車查違章" data-desc="全國違章查詢提醒" data-qrcode="statics/images/erweima2.png" src="statics/images/43d30dbb-5855-45d2-ad30-3485722c3b1b.png">

				</div>
			</div>
		</div>

		<div class="case-panel tab-3">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/HXsTuFWyZzujJcQZVaSP.jpg">

				<img class="phone-image  image-2" src="statics/images/yieKvQTVJYJeKovuHOBY.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">江蘇政務服務</div>
						<div class="case-text">江蘇政務服務,蘇服在身邊</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover active" data-title="江蘇政務服務" data-desc="江蘇政務服務,蘇服在身邊" data-qrcode="statics/images/erweima2.png" src="statics/images/b708911d-d545-47cf-80c8-00da1e6d989a.png">

					<img class="image-hover" data-title="廣州政務通" data-desc="提供市民便捷的線上政務服務" data-qrcode="statics/images/erweima2.png" src="statics/images/f6e4948f-6fce-4895-a2a2-29e8dc8aba65.png">

				</div>
			</div>
		</div>

		<div class="case-panel tab-4">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/prUwJtIutMJvgCDGGIXT.jpg">

				<img class="phone-image  image-2" src="statics/images/JiIZnMiOmGKKhXqLlUXX.jpg">

				<img class="phone-image  image-3" src="statics/images/tPvpMTTuaAZaDzQudCAj.jpg">

				<img class="phone-image  image-4" src="statics/images/WBygFStsPAmNPuSCNdwA.jpg">

				<img class="phone-image  image-5" src="statics/images/aGDacsCLsTNKQVRnULmc.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">高德地圖實時公交</div>
						<div class="case-text">實時的公交車到站信息查詢工具</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover active" data-title="高德地圖實時公交" data-desc="實時的公交車到站信息查詢工具。" data-qrcode="statics/images/erweima2.png" src="statics/images/76e8cc26-7dc6-4a9a-9dac-62ab8f8c1dd7.png">

					<img class="image-hover " data-title="飛豬訂機票火車票酒店" data-desc="飛豬,享受大不同!" data-qrcode="statics/images/erweima2.png" src="statics/images/8a002ba3-ff98-4d1b-a212-7828952a1453.png">

					<img class="image-hover " data-title="哈羅單車" data-desc="全國免押金" data-qrcode="statics/images/erweima2.png" src="statics/images/76c2030f-9dbf-4a5a-8aa3-289ea8968093.png">

					<img class="image-hover " data-title="一嗨租車" data-desc="中國自駕租車領導品牌" data-qrcode="statics/images/erweima2.png" src="statics/images/68fc4828-8898-4bb9-b6bf-c0e82ecbcc99.png">

					<img class="image-hover " data-title="易挪車" data-desc="臨時停車必備神器,?;こ抵饕? data-qrcode="statics/images/erweima2.png" src="statics/images/783d6339-6c74-4a48-b40d-8931c2286329.png">

				</div>
			</div>
		</div>

		<div class="case-panel tab-5">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/zrudqZNdwnvRPUdRGoQZ.jpg">

				<img class="phone-image  image-2" src="statics/images/ZFkNrHqmCycedjOvlGOU.jpg">

				<img class="phone-image  image-3" src="statics/images/gzAvYMZxGjdqdaXqRLoT.jpg">

				<img class="phone-image  image-4" src="statics/images/JPAxDXlPlHJlOzCDRDeV.jpg">

				<img class="phone-image  image-5" src="statics/images/ZrMrbHeRwPPYNIQAAiTi.jpg">

				<img class="phone-image  image-6" src="statics/images/mQQYaXFDBsRSFmaMquHk.jpg">

				<img class="phone-image  image-7" src="statics/images/sXAqhRJhIcjsJjXmnUNW.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">浙江預約掛號</div>
						<div class="case-text">為居民提供一站式醫療健康服務</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover active" data-title="浙江預約掛號" data-desc="為居民提供一站式醫療健康服務" data-qrcode="statics/images/erweima2.png" src="statics/images/dbaaa65d-3452-4c80-85bb-3861cf798ea9.png">

					<img class="image-hover " data-title="醫通體檢預約" data-desc="一鍵預約高性價比體檢服務" data-qrcode="statics/images/erweima2.png" src="statics/images/3df1d899-bb06-4a13-893c-043887b6f30f.png">

					<img class="image-hover " data-title="藥急送" data-desc="線上下單到店自提或餓了么騎士配送" data-qrcode="statics/images/erweima2.png" src="statics/images/452ec59a-78e7-4c0b-a4f7-e99d3f47e95f.jpg">

					<img class="image-hover " data-title="廣州婦兒中心" data-desc="廣州婦兒醫療中心檢查檢驗預約服務" data-qrcode="statics/images/erweima2.png" src="statics/images/e2b9337c-955c-486e-ba2a-789c2b97c340.png">

					<img class="image-hover " data-title="疫苗快查" data-desc="阿里健康出品,疫苗快查小工具" data-qrcode="statics/images/erweima2.png" src="statics/images/07a4ad8e-8259-479f-b252-10978ee33195.png">

					<img class="image-hover " data-title="阿里健康問醫生" data-desc="阿里健康出品,在線問醫生" data-qrcode="statics/images/erweima2.png" src="statics/images/386c8f6c-1a70-4b9e-a7bd-39ebab91f9e3.png">

					<img class="image-hover " data-title="雨諾信用借" data-desc="根據用戶信用 借還醫療器械" data-qrcode="statics/images/erweima2.png" src="statics/images/d422e28e-b032-4b4e-97dc-d2ebc21adf8f.png">

				</div>
			</div>
		</div>

		<div class="case-panel tab-6">
			<div class="case-left">
				<img class="phone-framework" src="statics/images/KKMyfEdqnMFZLdtZLktD.png">
				<div class="phone-image-cover hidden">
					<img src="statics/images/erweima.png">
					<div>掃描二維碼查看</div>
				</div>

				<img class="phone-image  image-1 active" src="statics/images/XPXRYOaRbmxfuFGKeRoZ.jpg">

				<img class="phone-image  image-2" src="statics/images/fsxWhFxMICBSKbDCsrII.jpg">

				<img class="phone-image  image-3" src="statics/images/uxRCxdovXsrWgGPPLQNz.jpg">

				<img class="phone-image  image-4" src="statics/images/rvSLNqdpVEhfHRmMTWzW.jpg">

				<img class="phone-image  image-5" src="statics/images/rgIqcdzroVEMtmlOpkkF.jpg">

				<img class="phone-image  image-6" src="statics/images/xPQFkVkxtSwAIxBxeBZk.jpg">

				<img class="phone-image  image-7" src="statics/images/cLHEfUdClTgnlImacPAg.jpg">

			</div>
			<div class="case-preview">
				<div class="case-icon-list">
					<div class="case-content">
						<div class="case-head">最美證件照</div>
						<div class="case-text">489種規格,隨拍最美證件照</div>
						<img class="" src="statics/images/DlsYGWIVAYbXkwMcQFuK.png">
					</div>

					<img class="image-hover active" data-title="最美證件照" data-desc="489種規格,隨拍最美證件照" data-qrcode="statics/images/erweima2.png" src="statics/images/3348fd9f-fb9a-437f-89c6-d72584e30176.png">

					<img class="image-hover " data-title="估嗎回收" data-desc="手機回收數碼回收—估嗎" data-qrcode="statics/images/erweima2.png" src="statics/images/2aabd782-017f-4034-9a9a-bf03ffc8277e.png">

					<img class="image-hover " data-title="e城e家" data-desc="生活繳費&上門服務&品質生活" data-qrcode="statics/images/erweima2.png" src="statics/images/030f6918-b61b-43dd-8247-efcd0b9e7d17.png">

					<img class="image-hover " data-title="人人租機" data-desc="0押金租手機電腦等" data-qrcode="statics/images/erweima2.png" src="statics/images/f8087ff6-5c5c-44c7-a3cf-577d3f7ff6f2.png">

					<img class="image-hover " data-title="速遞易取件助手" data-desc="為用戶提供快遞柜自助取件服務" data-qrcode="statics/images/erweima2.png" src="statics/images/28ece578-455b-48ec-82d3-ce34918470ce.png">

					<img class="image-hover " data-title="猛犸充電" data-desc="專注于電動單車的共享充電小工具" data-qrcode="statics/images/erweima2.png" src="statics/images/2798602a-fa3a-429b-a72e-59aa6ae5a59e.png">

					<img class="image-hover " data-title="街電" data-desc="讓全球手機永不斷電" data-qrcode="statics/images/erweima2.png" src="statics/images/b46f9ce6-f801-49d3-8d9c-46c2170c8331.png">

				</div>
			</div>
		</div>

	</div>
</div>

<script type="text/javascript">
	$(function() {
		var i = 0; //初始變量
		var k = 0; //初始變量
		var h = 5; //默認第一個內容條數
		//分類tap
		$('.industry').hover(function() {
			i = $(this).index(); //當前索引
			$(this).addClass('active').siblings().removeClass('active');
			$('.case-panel').eq(i).addClass('active').siblings().removeClass('active');
			h = $('.case-panel').eq(i).find('.image-hover').length; //獲取內容條數
		})
		//內容tap
		$('.case-panel .image-hover').hover(function() {
			var j = $(this).index();
			var src = $(this).attr('data-qrcode'); //data-qrcode屬性里面是二維碼的圖片
			var title = $(this).attr('data-title'); //標題
			var desc = $(this).attr('data-desc'); //描述
			$(this).addClass('active').siblings().removeClass('active');
			$(this).parents('.case-panel').find('.phone-image').eq(j - 1).addClass('active').siblings().removeClass('active');
			$(this).parents('.case-panel').find('.phone-image-cover').find('img').attr('src', src);
			$(this).parents('.case-panel').find('.case-head').text(title);
			$(this).parents('.case-panel').find('.case-text').text(desc);
			
		})
		//圖片二維碼
		$('.phone-framework').hover(function() {
			$(this).next('.phone-image-cover').removeClass('hidden');
		}, function() {
			$('.phone-image-cover').addClass('hidden');
		})
		//自動執行,間隔5秒
		setInterval(function() {
			$('.case-panel').eq(i).find('.image-hover').eq(k).addClass('active').siblings().removeClass('active');
			$('.case-panel').eq(i).find('.phone-image').eq(k).addClass('active').siblings().removeClass('active');
			k >= h - 1 ? k = 0 : k++;
		}, 5000)
	})
</script>
[聲明]本站素材來自用戶分享,僅限學習交流請勿用于商業用途。如損害你的權益請聯系客服QQ:2447402004給予處理。
舉報×
舉報原因:

相關代碼

二維碼
意見反饋
×
×

注冊

QQ注冊 立即下載 中国福彩快乐十分开奖分布图

簽到成功!

已連續簽到1天,簽到3天將獲得積分VIP1天

知道了