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

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

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>

分享到 :
相关推荐

VIP爱咋用咋用, jquery顶部导航菜单和图片轮播布局代码_导航菜单代码

VIP爱咋用咋用,jquery顶部导航菜单和图片轮播布局代码_导航菜单代码jquer...

客户案例图文列表滚屏切换特效

客户案例图文列表滚屏切换特效jQuery基于swiper制作实用的客户案例图文列表u...

婚礼类小程序前端界面模板

婚礼类小程序前端界面模板一款通用的婚礼策划,婚纱摄影类小程序前端模板。支持在线预约,...

网页图片拖拽组图diy特效

网页图片拖拽组图diy特效jQuery制作diy图片拖拽结合图形,png图片自由拖拽...

发表评论

登录... 后才能评论