选项卡(1滑动查看,点击1查看1.1)
实现界面:
空白格陈,授课解不开仅等需滑动查看,且下面相对应的dfd内容不会变化,只有点击空白格陈方可查看相应的内容如dfd等。
实现代码:
使用flipsnap.js插件实现顶部滑动查看效果,下为部分代码
<div class="inner"> <div class="active">空白格陈</div> <div>授课解不开仅</div> <div>反而望各位 </div> <div>额外VR供热共同投入</div> <div>5</div> <div>4</div> <div>5</div> </div> <ul class="inner-group" style="display: block;"> <li class="group-li"> <a href="jobNone.html">dfd</a> </li> <li class="group-li"> <a href="jobNone.html">dfd</a> </li> </ul> <ul class="inner-group"> <li class="group-li"> <a href="#">dfsdfd</a> </li> <li class="group-li"> <a href="#">dfsadd</a> </li> </ul> </div> <script src="js/mui.min.js"></script> <script src="js/jquery-1.7.2.js"></script> <script src="js/flipsnap.js"></script> <script type="text/javascript"> Flipsnap('.inner'); $(function(){ function tab(){ $('.inner div').on('click',function(){ $(this).addClass('active').siblings().removeClass('active'); // $(this).addClass('on').siblings().removeClass('on'); $(".inner-group").hide().eq($(this).index()).show(); }); } tab(); }) </script>
--励志成为老坛酸菜的小白菜!