jQuery行业案例tab选项卡布局代码
选项卡|滑动门 次 2019-04-18jQuery行业案例展示，采用tab选项卡布局设计，代码简洁高效。通过滑动门效果，实现平滑切换，提升用户体验。精选案例一目了然，助力用户快速了解行业应用。
jQuery tab产品案例图标文字选项卡切换，悬停导航文字标签，内容切换和悬停图标，标题文字切换。两种tab选项卡结合布局代码。支持自动选项卡切换效果。
[声明] 墨鱼部落格所有资源为用户免费分享产生，若发现您的权利被侵害，请点击后方链接查看并联系我们，我们尽快处理。免责声明|侵权处理流程
使用方法：
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>
文件目录
本资源来自：代码 » 选项卡|滑动门 » jQuery行业案例tab选项卡布局代码
注：此资源非帝国CMS模板/特效/源码，需要帝国CMS整站模板源码的小伙伴，请移步 帝国CMS模板，感谢支持！
jQuery解决方案列表tab切换代码
« 上一篇
2019年04月11日
jQuery阶梯手风琴图片布局
下一篇 »
2019年07月09日
1、如非特殊说明，本站对本文提供的代码或者素材不拥有任何权利，其版权归原著者拥有。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
2、以上提供的代码或者素材均为作者提供和网友推荐收集整理而来，仅供学习和研究使用。
3、如有侵犯你版权的，请来信（邮箱:48444431@qq.com）指出，核实后，本站将立即改正。
4、如有链接无法下载、失效或广告，请点击下面的报错或者联系墨鱼处理！
5、以上资源售价只是赞助，不代表代码或者素材本身价格。收取费用仅维持本站的服务器开销！
6、如无特殊说明，如：织梦或者帝国等开源CMS核心模板，那么默认提供的只是HTML模板！
7、所有代码素材效果均为演示打包，最终效果请参考演示效果，本站不提供任何技术支持和服务。
8、代码素材均为虚拟物品，演示和描述无错的情况下，无法进行退换服务。
