账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式

jQuery选项卡中嵌套选项卡切换效果

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

96 0 0 0
升级VIP尊享更多会员特权

源码属性

    • 源码编号YM71
    • 源码语言
    • 数据库
    • 适用行业TAB标签jquery特效其他代码
    • 下载价格10积分
    • VIP下载免费下载
    • 发布者冰蓝无敌
    • 更新时间2021-09-13

源码介绍

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>



转载请注明出处:https://www.wanxiangsucai.com/resources/show-71.html

全部评论( 0 )

冰蓝无敌ID:1

关注 私信

他共发布:395个素材去看看

上传时间:2021-09-13

素材作者:未知

素材类型:TAB标签jquery特效其他代码

适用程序:

版权申明:本站素材来网络和用户分享,仅限学习交流请勿用于商业用途。如损害你的权益请联系客服 QQ:120507403 给予处理。

积分不够用?点这里充值
猜你喜欢 没有想要的 快去搜一下