jQuery选项卡中嵌套选项卡切换效果
jQuery选项卡中嵌套选项卡切换效果,二级嵌套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>
声明:
1、本站所有文章仅供参考,如有侵权 请联系我们删除 meng#yimiaonet.com #换成@
2、文章大部分源自网络或ai生成,文章不作为任何依据,仅供参考。
3、本站的所有源码都是在网络上转载或由用户投稿,仅供参考学习使用,请您务必在下载后24小时内删除。
4、本站下载的所有源码等内容不得用于任何违反相关法律法规的用途,一经发现 我们立即向有关部门报备。
5、### 本站除商业栏目外 其他资源均来自于网络或用户投稿,如有侵权 请及时联系我们删除,感谢您的支持与理解,让我们一起支持创作者权益。
6、如果您需要商用,可以联系客服定制开发或购买商业源码栏目内的内容,当然也可以联系部分源码的原作者;我们最终一切版权。
7、您注册本站会员后,如果需要注销账号等适宜,请联系客服。
评论(0)