选项卡（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>