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>
    --励志成为老坛酸菜的小白菜!
  • 相关阅读:
    Java 时区转换(UTC+8 到 UTC 等等)
    spring 与 springmvc 的区别和定义
    字符串加密解密(Base64)
    上传视频本地预览问题
    vue 监听store中的数值
    判断对象是否为空
    正则 验证是否包含特殊字符
    js 过滤日期格式
    vue methods computed watch区别
    for + setTimeout
  • 原文地址:https://www.cnblogs.com/yongwang/p/6589547.html
Copyright © 2011-2022 走看看