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>
暂无评论内容