zoukankan      html  css  js  c++  java
  • 选项卡(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>
    --励志成为老坛酸菜的小白菜!
  • 相关阅读:
    drf的模型基表与10个单群操作方法
    drf的序列化组件
    drf之请求模块,渲染模块,解析模块,响应模块,异常模块
    drf之接口与接口规范
    MongoDB C# Demo
    如何用Dome4j(2.2.1)创建Xml
    Map、Set的基本概括
    如何自定义xml文件
    HashMap和HashTable的理解与区别
    装箱 拆箱
  • 原文地址:https://www.cnblogs.com/yongwang/p/6589547.html
Copyright © 2011-2022 走看看