瓦窑源码 快速建站好帮手

jQuery制作TAB标签选项卡中嵌套TAB选项卡切换效果

特效介绍

这款jQuery制作TAB标签选项卡中嵌套选项卡切换效果,二级嵌套Tab切换代码,鼠标悬停选项卡即切换,还有二维码展示效果。

js代码

<script src="statics/js/jquery.min.js"></script>
<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>

具体效果看右侧的【在线演示】吧^_^

TAB嵌套TAB选项卡

TAG标签:TAB嵌套TAB选项卡

上一个:移动端TAB标签选择页切换展示echarts数据图表代码
下一个:jQuery制作tab多级标签选项卡产品列表可滚动切换代码

免责声明:本站模板均来自用户分享和网络收集,仅供学习研究,请勿用于商业用途,若损害您的权利,请联系网站客服,核实后立即删除。

瓦窑源码网专注织梦网站源码与静态模板分享,提供织梦模板,dedecms模板,织梦企业源码,dedecms商业源码和织梦免费模板下载

整站源码 - 静态模板 - 网页特效 - CMS教程 - 站长指南 - 热门排行 - XML - HTML - TAG - 免责声明

Copyright© 2021 瓦窑源码 WHY114.COM 版权所有 鲁ICP备20017802号-2

客服QQ:1847629575 微信号:qilujianzhan

展开