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

jQuery选项卡中嵌套选项卡切换效果-精品资源网
jQuery选项卡中嵌套选项卡切换效果
此内容为免费资源,请登录后查看
0
免费资源

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>

© 版权声明
THE END
点赞0 分享
评论 抢沙发
头像
欢迎您留下宝贵的见解!
提交
头像

昵称

取消
昵称表情代码图片

    暂无评论内容